/* reset css */
* { box-sizing:border-box;}html { margin: 0em; padding: 0; height:100%;width:100%; }a { outline:none; }
body { margin:0; padding: 0; font-family: sans-serif,'trebuchet ms','lucida grande','lucida sans unicode',arial,helvetica; font-size:14px; width:100%; height:100%; }
input:focus, select:focus, textarea:focus, button:focus { outline:0; }p { padding:0; margin:0; }img { border:0px; }h1, h2, h3{ margin: 0; padding: 0; }h2 { font-size:1.5em; margin-bottom:5px; }
ul { margin: 0; padding: 0; list-style:none; }li { list-style:none; }button { border:none; outline: none !important; cursor:pointer; }
textarea, input{ resize:none; font-size:14px; font-family:sans-serif,"trebuchet ms","lucida grande","lucida sans unicode",arial,helvetica,sans-serif; }
input { font-family: 'FontAwesome', sans-serif,'trebuchet ms','lucida grande','lucida sans unicode',arial,helvetica,sans-serif; }
/* table and cell css */
.btable { display:table; table-layout:fixed; width:100%; }
.btable_auto { display:table; table-layout:auto; }
.btable_height { display:table; table-layout:fixed; width:100%; height:100%; }
.bcell { display:table-cell; }
.bcell_auto { display:table-cell; width:1%; white-space:nowrap; }
.brow { display:table-row; }
.brow_center { display:table-row; vertical-align:middle; }
.bcell_mid { display:table-cell; vertical-align:middle; }
.bcell_mid_center { display:table-cell; vertical-align:middle; text-align:center; }
.bcell_mid_auto { display:table-cell; vertical-align:middle; width:1%; white-space:nowrap; }
.bcell_mid_right { display:table-cell; vertical-align:middle; text-align:right; }
.bcell_mid_left { display:table-cell; vertical-align:middle; text-align:left; }
.bcell_top { display:table-cell; vertical-align:top; }
.bcell_bottom { display:table-cell; vertical-align:bottom; }
/* overflow */
.bflow { overflow:hidden; }
.maxflow { overflow:hidden; max-width:100%; }
/* listing css */
.sub_list_item { display:table; table-layout:fixed; width:100%; padding:12px 10px; cursor:pointer; }
.sub_list_avatar, .sub_list_img { width:40px; display:table-cell; vertical-align:middle; text-align:center; position:relative; }
.sub_list_room { width:40px; display:table-cell; vertical-align:middle; text-align:center; position:relative; }
.sub_list_gift { width:50px; display:table-cell; vertical-align:middle; text-align:center; position:relative; }
.sub_list_avatar img { width:40px; height:40px; border-radius:50%; display:block; }
.sub_list_img img { width:40px; height:40px; display:block; }
.sub_list_room img { width:40px; height:40px; display:block; }
.sub_list_gift img { height:50px; height:auto; display:block; }
.sub_list_option { display:table-cell; vertical-align:middle; width:40px; text-align:center; font-size:16px; }
.sub_list_icon { display:table-cell; vertical-align:middle; width:30px; text-align:center; font-size:16px; }
.sub_list_ricon { display:table-cell; vertical-align:middle; width:30px; text-align:center; }
.sub_list_state { display:table-cell; width:30px; vertical-align:middle; text-align:center; font-size:16px; }
.sub_list_selected { display:table-cell; vertical-align:middle; width:24px; text-align:center; font-size:15px; }
.sub_list_content { display:table-cell; vertical-align:middle; }
.sub_list_pcontent { display:table-cell; vertical-align:middle; padding:0 5px; }
.sub_list_status { display:table-cell; vertical-align:middle; width:120px; }
.sub_list_timer { display:table-cell; vertical-align:middle; width:100px; }
.sub_list_cell { display:table-cell; vertical-align:middle; }
.sub_list_cell_top { display:table-cell; vertical-align:top; }
.sub_list_name { padding:0 10px; display:table-cell; vertical-align:middle; white-space:nowrap; overflow:hidden; }
.sub_list_text { padding:0 5px; display:table-cell; vertical-align:middle; overflow:hidden; }
.sub_list_active { position: absolute; bottom: 0; right: 0; width: 12px !important; height:12px !important; border-radius:50%; }
.sub_list_rank { display: table-cell; vertical-align:middle; width:40px; }
.sub_list_rank img { height:16px; width:auto; display:block; margin:0 auto; }
.room_listing { border-radius:5px; }
/* custom select */
.boom_sel_container { position:relative; }
.boom_sel { padding:10px; position:relative; cursor:pointer; }
.boom_sel_icon { width:24px; display:table-cell; vertical-align:middle; text-align:center; position:relative; }
.boom_sel_icon img { width:24px; height:24px; display:block; }
.boom_sel_text { display:table-cell; vertical-align:middle; padding:0 5px; }
.boom_sel_menu { display:table-cell; vertical-align:middle; width:30px; font-size:16px; text-align:center; }
.boom_opt_container { position:absolute; top:100%; display:none; z-index:1; }
.boom_opt { padding:10px; cursor:pointer; }
.boom_opt_icon { width:24px; display:table-cell; vertical-align:middle; text-align:center; position:relative; }
.boom_opt_icon img { width:24px; height:24px; display:block; }
.boom_opt_text { display:table-cell; vertical-align:middle; padding:0 5px; }
/* gift css */
.gift_edit_img { height:100px; width:auto; max-width:100%; border-radius:10px; }
.gcard { width:calc((100% / 4) - 10px); height:110px; margin:5px; display:grid; align-items:center; float:left; position:relative; border-radius:10px; }
.gcard_img { width:60px; max-height:60px; margin:0 auto; }
.gcard_price { position:absolute; bottom:5px; left:5px; padding:3px 5px; border-radius:50px; left:0; right:0; margin:auto; }
.gcard_pwrap { width:14px; }
.gcard_pwrap img { width:14px; height:14px; display:block; }
.gift_received, .gift_del, .gift_selected { height:90px; max-width:100%; border-radius:10px; display:block; margin:0 auto; }
.gift_selicon { width:24px; height:24px; }
.gift_selicon img { width:24px; height:24px; display:block; }
.gift_pricing { font-size:30px; }
.gtag { z-index:2; }
.pgcard { width:calc((100% / 5) - 10px); height:70px; margin:5px; display:grid; align-items:center; float:left; position:relative; border-radius:10px; }
.pgcard_img { max-width:100%; max-height:50px; margin:0 auto; }
.pgcard_count { position:absolute; bottom:5px; left:5px; padding:1px 3px; border-radius:50px; }
/* cost element */
.cost_tag { padding:3px; border-radius:50px; }
.cost_tag_icon { width:16px; }
.cost_tag_icon img { width:16px; height:16px; display:block; }
.cost_tag_amount { font-weight:bold; font-size:14px; padding:0 3px; }
.cost_tag_wrapper { display:inline-block; }
/* console css */
.console_date { width:65px; display:table-cell; vertical-align:top; font-size:11px; }
/* listing element */
.listing_element { padding:15px 10px; }
.listing_half_element { padding:15px 10px; width:calc(50% - 10px); float:left; margin:0 5px; }
.listing_title { font-weight:bold; padding-bottom:3px; }
.listing_text { font-size:13px; word-wrap:break-word; min-height:20px; }
.listing_icon { width:24px; font-size:16px; }
/* listing reg */
.listing_reg { display:table; table-layout:fixed; width:100%; padding:15px 10px; }
.listing_reg_icon { display:table-cell; vertical-align:middle; text-align:center; width:30px; font-size:16px; }
.listing_reg_content { display:table-cell; vertical-align:middle; }
/* settings element */
.setting_element { padding:10px 0; }
/* user box list css */
.ulist_container { max-height:386px; overflow:hidden; overflow-y:auto; }
.ulist_item { width:100%; height:auto; table-layout:fixed; display:table; padding:8px; cursor:pointer; border-radius:5px; }
.ulist_name { display:table-cell; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; padding:0 5px; }
.ulist_data { display: table-cell; vertical-align:middle; padding:0 5px; }
.ulist_option { display:table-cell; vertical-align:middle; width:40px; text-align:center; font-size:16px; }
.ulist_avatar { display:table-cell; vertical-align:middle; text-align:center; width:40px; }
.ulist_avatar img { width:40px; height:40px; border-radius:50%; display:block; margin:0 auto; }
.ulist_notify { display: table-cell; vertical-align:middle; width:32px; text-align:center; }
.ulist_rank { display: table-cell; vertical-align:middle; width:40px; }
.ulist_rank img { height:16px; width:auto; display:block; margin:0 auto; }
/* userlist element css */
.user_item { position:relative; display:table; table-layout:fixed; width:100%; cursor:pointer; padding:5px 10px; border-radius:5px; }
.user_item_avatar { display:table-cell; vertical-align:middle; width:36px; position:relative; }
.user_item_avatar .acav { width:36px; height:36px; border-radius:50%; display:block; cursor:pointer; }
.user_item_data, .user_item_name { display: table-cell; vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 8px; }
.user_item_icon { display: table-cell; vertical-align:middle; width:24px; text-align:center; font-size:15px; }
.user_item_option { width:40px; text-align:center; font-size:20px; vertical-align:middle; display:table-cell; }
.user_item_div { width:60px; text-align:center; font-size:20px; vertical-align:middle; display:table-cell; }
.user_item_flag { width:24px; text-align:center; vertical-align:middle; display:table-cell; }
.user_item_flag img { width:20px; height:auto; display:inline-block; margin:0 auto; border-radius:2px; }
.list_status { position:absolute; left:0; bottom:-2px; width:14px; height:14px; border-radius:50%; background:#fff; padding:1px; }
.list_mood { font-size:11px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.list_flag { height:13px; width: auto; border-radius: 2px; }
.list_rank { height:15px; width:auto; display:inline-block; }
.list_mute { height:15px; width:auto; }
.list_mob { height:15px; width:auto; }
.list_ghost { height:15px; width:auto; }
/* switch element */
.switch_item { display:table; table-layout:fixed; width:100%; padding:15px; cursor:pointer; margin-bottom:3px; border-radius:5px; }
.switch_item_switch { display:table-cell; vertical-align:middle; width:60px; }
.switch_item_text { display:table-cell; vertical-align:middle; }
.switch_wrap { display:block; width:50px; margin:0 auto;}
.bswitch { display:table; width:50px; padding:2px; border-radius:100px; }
.bball_wrap { display:table-cell; vertical-align:middle; }
.bball { width:24px; height:24px; border-radius:50%; display:block; }
.offswitch { background:#ccc; }
.onswitch{ background:#74b20e; }
.onball { background:#fff; margin-left:22px; }
.offball { background:#fff; margin-left:0px; }
/* bubtext */
.bubtext { display:inline-block; margin-bottom:3px; }
.bubtext:not(:last-child)::after {
content: ",";
}
/* ghost post */
.ghost_post { border-left:8px solid; border-right:0px; }
/* pagination element */
.pagarrow, .paglist, .pagload { padding:10px 15px; font-weight:bold; display:inline-block; margin:2px 5px; border-radius:5px; cursor:pointer; }
.pagdot { width:16px; height:16px; display:inline-block; margin:8px; border-radius:50%; cursor:pointer; }
/* color choices */
.preview_zone { margin-bottom:20px; }
#preview_name { font-weight:bold; display:inline-block; }
#preview_text { line-height:1.4em; display:inline-block; }
/* boom simple top box */
.boom_top_wrap { position:relative; }
.boom_top { padding:10px 15px; }
.boom_top_close { cursor:pointer; width:40px; text-align:center; font-size:20px; }
.boom_top_avatar { width:32px; }
.boom_top_avatar img { width:32px; height:32px; border-radius:50%; display:block; }
.boom_top_name { padding:0 10px; }
/* text area css */
.xlarge_textarea { height:300px; max-height:300px; }
.large_textarea { height:180px; max-height:180px; }
.medium_textarea { height:100px; max-height:100px; }
.small_textarea { height:65px; max-height:65px; }
/* text special css */
.no_break { white-space:nowrap; }
.aleft { text-align:left; }
.aright { text-align:right; }
.acenter { text-align:center; }
.fright { float:right; }
.fleft { float:left; }
.bellips { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.tbreak { word-wrap:break-word; }
/* button css */
.btn_ellips { max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.full_button { width:100%; text-align:center; }
.button_half { width:49%; text-align:center; }
.button_left { float:left; }
.button_right { float:right; }
.button { padding:10px; }
.tbutton { padding:8px 10px; }
.macro_button { padding:2px 8px; margin:2px 0 0 0; font-size:11px; min-width:20px; }
.micro_button { padding:3px 8px; margin:2px 0 0 0; font-size:12px; min-width:20px; }
.count_button { padding:2px 6px; font-size:11px; border-radius:50px; }
.tiny_button { padding:3px 10px; margin:5px 0 0 0; min-width:40px; }
.thin_button { padding:5px 10px; min-width:100px; }
.reg_button { padding:10px; min-width:100px; }
.card_button { padding:8px 10px; min-width:100px; max-width:100px; }
.mod_button { padding:8px 10px; min-width:100px; margin:0 0 5px 0; }
.modr_button { padding:8px 10px; margin:0 0 5px 0; }
.small_button { padding:8px 10px; min-width:50px; }
.large_button { padding:10px 20px; border-radius:3px; min-width:200px; font-size:16px; }
.small_button_rounded { padding:8px 12px; border-radius:25px; }
.large_button_rounded { padding:12px 20px; border-radius:25px; font-size:16px; min-width:200px; margin-top:5px; }
.small_button, .reg_button, .mod_button, .modr_button, .button, .tbutton, .tiny_button, .micro_button, .thin_button, .macro_button, .card_button { border-radius:5px; }
.panel_full_btn { padding:10px; }
.rounded_button { border-radius:100px; }
.round_button { width:60px; height:60px; border-radius:50%; }
.work_button { display:none; }
/* view height */
.vheight { min-height:calc(100vh - 100px); }
/* box css */
.box_height { max-height:500px; overflow:hidden; overflow-y:auto; }
.box_height800 { max-height:800px; overflow:hidden; overflow-y:auto; }
.box_height700 { max-height:700px; overflow:hidden; overflow-y:auto; }
.box_height600 { max-height:600px; overflow:hidden; overflow-y:auto; }
.box_height500 { max-height:500px; overflow:hidden; overflow-y:auto; }
.box_height400 { max-height:400px; overflow:hidden; overflow-y:auto; }
.box_height300 { max-height:300px; overflow:hidden; overflow-y:auto; }
/* misc element css */
.bblock { display:block; }
.inblock { display:inline-block; }
.binline { display:inline; }
.centered_element, .centered { text-align:center; }
.hidden { display:none; }
.fhide { display:none !important; }
.bclick { cursor:pointer; }
.fa, .bi { cursor:pointer; }
.bwfull { width:100%; }
.bhfull { height:100%; }
.noflow { overflow:hidden; }
.brelative { position:relative; }
/* font style css */
.ital { font-style:italic; }
.bold { font-weight:bold; }
.boldital { font-weight:bold; font-style:italic; }
.heavybold { font-weight:900; }
.heavyital { font-weight:900; font-style:italic; }
/* text css */
.text_xmicro { font-size:9px; }
.text_micro { font-size:10px; }
.text_xsmall { font-size:11px; }
.text_ssmall { font-size:12px; }
.text_small { font-size:13px; }
.text_reg { font-size:14px; }
.text_xreg { font-size:15px; }
.text_xxreg { font-size:16px; }
.text_med { font-size:18px; }
.text_xmed { font-size:20px; }
.text_large { font-size:22px; }
.text_xlarge { font-size:25px; }
.text_jumbo { font-size:35px; }
.text_xjumbo { font-size:45px; }
.text_ultra { font-size:60px; }
.text_xultra { font-size:70px; }
.noem { line-height:1em; }
/* avatar css */
.avatar_menu { width:36px; height:36px; border-radius:50%; display:block; cursor:pointer; margin:0 auto; }
.avatar_small { width:32px; height:32px; border-radius:50%; display:block; cursor:pointer; }
.avatar_med { width:36px; height:36px; border-radius:50%; display:block; cursor:pointer; }
.avatar_large { width:42px; height:42px; border-radius:50%; display:block; cursor:pointer; }
.avatar_xlarge { width:110px; height:110px; border-radius:50%; display:block; cursor:pointer; }
.avatar_jumbo { width:140px; height:140px; border-radius:5px; display:block; cursor:pointer; }
/* form css */
.form_content { }
.form_control { padding-top:15px; }
.form_left, .form_left_full { width:50%; float:left; padding-right:3px; }
.form_right, .form_right_full { width:50%; float:right; padding-left:3px; }
.form_split { width:100%; clear:both; }
.form_tier { display:table; table-layout:fixed; width:100%; }
.form_tier1 { display:table-cell; padding-right:2px; }
.form_tier2 { display:table-cell; padding:0 2px; }
.form_tier3 { display:table-cell; padding-left:2px; }
/* page menu */
.page_menu_item { display:table; table-layout:fixed; width:100%; padding:15px; cursor:pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position:relative; }
.page_menu_icon { display:table-cell; vertical-align:middle; width:26px; text-align:center; font-size:16px; }
.page_menu_text { display:table-cell; vertical-align:middle; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; padding:0 5px; }
.page_menu_notify { display:table-cell; vertical-align:middle; width:16px; }
.page_drop { display:none; }
.page_drop_item { display:table; table-layout:fixed; width:100%; padding:15px 30px; cursor:pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position:relative; }
.page_drop_icon { display:table-cell; vertical-align:middle; width:24px; text-align:center; }
.page_drop_text { display:table-cell; vertical-align:middle; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.popen { display:none; }
/* listing css */
.puser_item { padding:8px 10px; display:table; table-layout:fixed; width:100%; cursor:pointer; font-size:14px; text-shadow:none; }
.puser_avatar { display:table-cell; width:32px; height:32px; vertical-align:middle; }
.puser_avatar img { width:32px; height:32px; border-radius:50%; display:block; }
.puser_option { width:30px; display:table-cell; vertical-align:middle; font-size:15px; text-align:center; }
.puser_name { padding:0 6px; font-size:14px; display:table-cell; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
.puser_icon { width:30px; text-align:center; display:table-cell; vertical-align:middle; }
.puser_icon img { width:16px; height:16px; margin:0 auto; display:block; }
.puser_text { display:table-cell; vertical-align:middle; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; text-align:initial; }
.puser_rank { width:34px; text-align:center; display:table-cell; vertical-align:middle; font-weight:bold; font-size:15px; }
.puser_rank img { width:24px; height:24px; margin:0 auto; display:block; }
.puser_score { display:table-cell; vertical-align:middle; width:80px; text-align:right; }
/* pro menu */
.fmenu { position:absolute; border-radius:5px; overflow:hidden; display:none; text-align:initial; }
.fmenu_item { padding:12px 10px; display:table; table-layout:fixed; width:100%; cursor:pointer; font-size:14px; text-shadow:none; border-radius:5px; }
.fmenu_avatar { display:table-cell; width:32px; height:32px; vertical-align:middle; }
.fmenu_avatar img { width:32px; height:32px; border-radius:50%; display:block; }
.fmenu_option { width:30px; display:table-cell; vertical-align:middle; font-size:15px; text-align:center; }
.fmenu_name { padding:0 5px; font-size:14px; display:table-cell; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
.fmenu_notify { display:table-cell; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; text-align:center; width:12px; position:relative; }
.fmenu_icon { width:30px; text-align:center; display:table-cell; vertical-align:middle; font-size:16px; }
.fmenu_icon img { width:18px; height:18px; margin:0 auto; display:block; }
.fmenu_text { display:table-cell; vertical-align:middle; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; text-align:initial; padding:0 5px; }
.fmenu_otext { display:table-cell; vertical-align:middle; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; text-align:initial; }
.fnotify { width:12px; height:12px; border-radius:50%; display:none; }
.fmenut { padding:10px; }
.fmuser { padding:10px; }
.fmenuxt { padding:5px; }
/* status icons */
.icon_status { border-radius:50%; padding:1px; }
/* menus css */
.menu_spinner_wrap { padding:15px; text-align:center; }
.menu_spinner { font-size:30px; }
.float_top, .float_ctop { display:table; padding:5px; height:30px; table-layout:auto; width:100%; max-width:100%; cursor:pointer; }
.ftop_opt_btn, .ftop_opt_icon { width:30px; height:30px; text-align:center; display:table-cell; vertical-align:middle; }
.ftop_empty { display:table-cell; vertical-align:middle; }
.ftop_opt_text { height:30px; display:table-cell; vertical-align:middle; font-weight:bold; }
.ftop_action { height:30px; width:40px; display:table-cell; vertical-align:middle; text-align:center; }
.float_title { font-size:16px; font-weight:bold; margin-bottom:15px; }
.float_content { overflow-y:auto; padding:10px; }
.floatopt { padding:5px; font-weight:bold; }
.float_section { padding:10px 0; }
.float_menu { border-radius:5px; overflow:hidden; overflow-y:auto; max-width:calc(100% - 10px); margin:5px; }
/* menus positions */
#private_opt { position:absolute; right:0; top:0; margin:5px; z-index:40; display:none; }
#page_main_menu { position:fixed; right:0; z-index:202; top:50px; margin:5px; display:none; }
#player_menu, #station_menu { position:absolute; left:0; bottom:50px; z-index:202; display:none; text-align:initial; }
#chat_left_menu, #room_options_menu { position:absolute; left:0; top:0px; z-index:202; display:none; text-align:initial; }
#chat_main_menu, #status_menu, #report_menu, #notification_menu, #bank_menu,
#friends_menu, #private_menu { position:absolute; right:0; z-index:202; top:10px; display:none; text-align:initial; }
/* menus width */
#private_opt { width:230px; }
#page_main_menu { width:300px; }
#chat_main_menu { width:300px; }
#status_menu { width:300px; }
#bank_menu { width:300px; }
#chat_left_menu { width:300px; }
#room_options_menu { width:300px; }
#report_menu { width:320px; }
#notification_menu { width:320px; }
#friends_menu { width:320px; }
#private_menu { width:320px; }
#station_menu { width:320px; }
#player_menu { width:320px; }
/* avatar menu */
#av_menu { width:240px; height:auto; position: fixed !important;top: 5% !important; left:-5000px; z-index:99; border-radius:5px; overflow:hidden; cursor:pointer; }
.topcard { padding:10px; min-height:90px; }
.avbackground { background-size:cover !important; background-position:50% 50% !important; }
.bottomcard { }
.avavpart { text-align:center; }
.avagegender { font-size:12px; }
.avdetails { text-align:center; }
.avtopmenu { min-height:15px; margin-bottom:-15px; }
.avoption { width:24px; height:24px; font-size:16px; text-align:center; }
.avavatar { width:60px; height:60px; border-radius:50%; display:block; margin:0 auto; }
.avusername { font-weight:bold; font-size:20px; width:100%; }
.avcontent { width:100%; display:block; position:relative; }
.avitem { padding:12px 10px; text-align:center; cursor:pointer; }
.avitem i { padding:0 3px; }
.avtopopt { width:30px; text-align:center; }
.avflag { width:24px; height:auto; border-radius:2px; }
/* sub menus */
#log_menu { width:200px; height:auto; position:absolute; bottom:0; left:-5000px; z-index:99; border-radius:5px; overflow:hidden; }
.submenu_item { padding:10px; display:table; table-layout:fixed; width:100%; cursor:pointer; font-size:14px; text-shadow:none; }
.subm_title { font-size:13px; font-weight:bold; }
.subm_sub { font-size:11px; }
.subm_icon { width:30px; text-align:center; }
.logmenu { width:100%; display:block; position:relative; }
/* mods css */
.top_mod { display:table; table-layout:fixed; width:100%; }
.top_mod_empty { display:table-cell; vertical-align:middle; }
.top_mod_option { display:table-cell; vertical-align:middle; font-size:18px; text-align:center; width:40px; height:40px; }
/*page css */
#page_global { display:table; table-layout:fixed; width:100%; }
#page_full_global { display:table; table-layout:fixed; width:100%; height:100%; }
#page_content { width:100%; max-width:1100px; margin:0 auto; height:auto; padding:70px 0px; }
#page_full_content { width:100%; height:100%; overflow:hidden; position:relative; z-index:0; padding-top:50px; }
#page_wrapper { width:100%; position:relative; overflow:hidden; overflow-y:auto; }
#page_full_in { width:100%; height:100%; overflow:hidden; overflow-y:auto; }
#side_menu { position:fixed; left:0; top:0; height:100%; width:260px; display:none; overflow-y:auto; z-index:3; padding:50px 0px 20px 0px; }
.page_closemenu { width:40px; text-align:center; }
.page_topmenu { height:40px; }
.page_wrapper_in { padding:10px; }
.page_menu_wrapper { overflow:hidden; overflow-y:auto; }
.page_indata { display:table-cell; vertical-align:top; }
.page_full_indata { display:table-cell; vertical-align:top; }
.page_menu { display:table-cell; vertical-align:top; width:260px; }
.page_full { width:100%; display:table; table-layout:fixed; }
.page_left { display:table-cell; vertical-align:top; padding-right:10px; }
.page_right { display:table-cell; vertical-align:top; padding-left:10px; }
.page_350 { width:330px; display:table-cell; vertical-align:top; }
.page_40 { width:40%; display:table-cell; vertical-align:top; }
.page_quarter { width:25%; display:table-cell; }
.page_half { width:50%; display:table-cell; vertical-align:top; }
.page_third { width:33%; display:table-cell; vertical-align:top; }
.page_two_third { width:66%; display:table-cell; vertical-align:top; }
.page_350 img, .page_full img, .page_left img, .page_right img, .page_40 img, .page_quarter img, .page_half img, .page_third img, .page_two_third img { max-width:100%; }
.page_element { padding:20px; margin-bottom:10px; border-radius:2px; }
.split { display:table; width:100%; table-layout:fixed; }
.split_left, .element_left { width:50%; display:table-cell; padding-right:5px; }
.split_right, .element_right { width:50%; display:table-cell; padding-left:5px; }
.page_top_elem { display:table; table-layout:fixed; width:100%; }
.page_top_title { display:table-cell; vertical-align:middle; }
.page_top_option { display:table-cell; vertical-align:middle; width:120px; }
.page_menu_content { padding:0 0 40px 0; }
/* label css */
.label { margin:0 0 8px 0; font-size:13px; font-weight:bold; }
.sub_label { padding-top:5px; font-size:12px; }
/* title css */
.mod_title { font-weight:bold; margin:15px 0; }
/* list css */
.list { padding:15px; }
.list li { list-style:disc; padding:1px 0; }
.list_icon { width:20px; display:inline-block; }
/* modal css */
.modal_open { overflow:hidden; }
/* input css */
.full_input, .full_textarea { padding:14px 10px; width:100%; min-width:100%; max-width:100%; border:none; border-radius:5px; }
.edit_page_box { min-height:600px; }
.large_input { font-size:20px; }
.selectboxit-container .selectboxit-list { width: 100%;}
.selectboxit-container {width:100%; }
.selectboxit-container .selectboxit { width:100%; }
.selectboxit-container .selectboxit-options { max-height: 180px; border-radius:5px;}
.selectboxit-container span, .selectboxit-container .selectboxit-options a { height:46px; line-height:46px; }
.selectboxit-container .selectboxit { border-radius:5px; }
/* misc element */
.username { font-weight:bold; cursor:pointer; display:inline-block; }
.link_like, .blinking { text-decoration:underline; }
.no_link_like { text-decoration:none; cursor:pointer; }
.system_text { display:inline-block; max-width:100%; padding:5px 10px; border-radius:5px; margin-top:5px; font-weight:normal !important; font-size:12px; }
.post_content .system_text { display:block; text-align:center; padding:10px; }
.del_text { display:inline-block; max-width:100%; border-radius:5px; font-weight:normal !important; font-size:11px; }
#content_page { width:100%; height:auto; }
#chat_right_data .load_more { margin-bottom:50px; }
ow
/* form login & registration css */
.not_member { padding:10px 15px; font-size:12px; margin-top:5px; }
.login_control { margin-top:5px; }
.rules_click { cursor:pointer; text-decoration:underline; }
.fbl_button { background:#3b5998; color:#fff; }
.twit_button { background:#1da1f2; color:#fff; }
.gplus_button { background:#dd4b39; color:#fff; }
.gplus { color:#dd4b39; }
.fbook { color:#3b5998; }
.twit { color:#1da1f2; }
.linkedin { background:#0077B5; cursor:pointer; color:#fff; }
.uploaded_file { text-decoration:none !important; display:block; padding:3px 10px; border-radius:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/*monitor tool */
#monitor_data { z-index:10000; position:fixed; top:15px; left:15px; padding:15px; background:rgba(0,102,0,0.95); color:#fff; border-radius:5px; display:none; cursor:pointer; min-width:130px; }
/* footer css */
#menu_main_footer { font-size:14px; width:auto; }
#menu_main_footer li { display:inline-block; margin:5px 10px 5px 0; }
#menu_main_footer li a { color:inherit; text-decoration:none; }
/* misc text css */
.text_title { font-weight:bold; font-size:20px; margin-bottom:15px; }
.text_text { font-size:13px; margin:7px 0; }
.text_box { max-height:500px; overflow-y:auto; }
/* active_user intro */
#intro_section_user { padding:72px 0; }
.active_user { height:110px; text-align:center; float:left; overflow:hidden; }
.active_embed { width:50px; height:50px; display:inline; margin:5px; }
.active_embed_user { width:50px; height:50px; border-radius:50%; }
/* outpage css */
.out_page_container { width:100%; height:100%; display:table; table-layout:fixed; }
.out_page_content { display:table-cell; text-align:center; vertical-align:middle; position:relative; }
.out_page_box { max-width:94%; width:480px; margin:0 auto; }
.out_page_title { font-size:25px; font-weight:bold; margin-bottom:10px; }
.out_page_text { font-size:16px; margin-bottom:15px; }
.adm_login { position:absolute; bottom:5px; left:5px; display:block; padding:10px; }
/* page title */
.page_ticon { width:40px; height:40px; font-size:20px; text-align:center; border-radius:50%; }
.page_ttext { font-size:25px; font-weight:bold; padding:0 10px; }
/* chat parts css */
#main_input, #disabled_content, #main_load_content { height:40px; width:100%;}
#container_input, #main_disabled, #main_load { padding:4px; }
#content, #message_content { width:100%; height:100%; padding:0; padding: 0 12px; float:left; font-size:16px; border-radius:100px; }
#inputt_left { height:100%; }
.chat_input_container { width:100%;}
.main_item { width:40px; height:100%; text-align:center; font-size:20px; z-index:1; display:table-cell; vertical-align:middle; position:relative; }
.main_hide { display:none; }
.sub_hidden { display:none; }
.input_icon { font-size:18px; }
.td_input { height:100%; display:table-cell; padding:0 3px; }
.input_table { overflow:hidden; display:table; table-layout:fixed; width:100%; height:100%; }
#send_image { border-radius:0px; }
#submit_button { width:100%; float:right; height:100% !important; font-weight:bold; box-shadow:none !important; padding:0; border:none !important; font-size:18px; }
#inside_wrap_chat { height:100%; overflow:hidden; }
#container_show_chat { width: 100%; height: 100%; position:relative; }
#show_chat { width:100%; height:100%; overflow:auto; overflow-x: hidden; }
#wrap_chat { height:100%; width:100%; }
#warp_show_chat { height:78%; overflow:hidden;}
#show_chat ul { width:100%; position:relative; }
#wrap_footer { height:auto; width:100%; position:fixed; bottom:0; left:0; z-index:200; }
#my_menu{ width:100%; height:50px; display:table; table-layout:fixed; }
.mute_mode { position:absolute; top:5px; border-radius:50px; width:90%; max-width:600px; margin-left: auto; margin-right: auto; left: 0; right: 0; text-align:center; z-index:100; padding:5px; opacity:0.9; }
/* private box */
.ppanel { overflow:hidden; padding:0; display:table-cell; vertical-align:top; max-width:100% !important; width:360px; }
.pfull { position:absolute; bottom:50px; right:0; overflow:hidden; z-index:150; max-width:100% !important; width:100%; }
.pboxed { position:absolute; bottom:50px; right:0; overflow:hidden; z-index:150; max-width:100% !important; height:400px !important; width:400px !important; }
.pboxed .pcontent { height:310px !important; }
#private_box { width:100%; overflow:hidden; }
#private_top { width:100%; display:table; height:40px; padding:0 5px; }
#private_wrap_content { position:relative; }
#priv_input { width:100%; }
#private_content { width:100%; overflow:hidden; overflow-y:auto; padding:5px 10px; }
#private_input, #private_disabled, #private_load { width:100%; padding:4px; position:relative; }
#private_disable, #private_load_content { height:40px; }
#message_form { height:40px; width:100%; }
#private_send { width:100%; height:100% !important; cursor:pointer; font-size:18px; }
#file_private { width:40px; text-align:center; vertical-align:middle; font-size:20px; display:table-cell; position:relative; text-align:center; }
#private_left { display:table; width:100%; height:100%; }
#private_av_wrap { width:30px; }
#private_av { cursor:pointer; width:30px; height:30px; display:block; border-radius:50%; }
#dpriv { position:relative; }
#private_name { cursor:pointer; font-size:16px; padding:0 8px; }
#dpriv_av { width:30px; height:30px; display:block; margin:0 auto; border-radius:50%; }
.private_opt { width:40px; text-align:center; cursor:pointer; display:table-cell; vertical-align:middle; position:relative; }
.empty_private { padding:20px 10px; text-align:center; font-size:17px;}
#inside_wrap_private { height: 100%; overflow: hidden; }
#show_private_wrap { width:100%; height:100%; overflow:auto; overflow-x:hidden; }
#show_private { position:absolute; bottom:0; max-height:100%; overflow-y:auto; }
#show_private li { width:100%; margin-bottom:3px; }
.cannotpriv { width:100%; display:table; table-layout:fixed; }
.private_logs { display:table; table-layout:fixed; width:100%; }
.private_avatar { display:table-cell; width:36px; vertical-align:top; padding:0 5px; }
.private_content { display:table-cell; vertical-align:top; }
.hunter_private, .target_private { padding:10px; max-width:220px; display:inline-block; word-wrap:break-word; line-height:1.4em; border-radius:10px; }
.hunt_quote, .targ_quote { padding:10px; margin-bottom:-6px; max-width:220px; display:inline-block; word-wrap:break-word; line-height:1.4em; border-radius:10px; }
.target_private, .targ_quote { float:right; }
.avatar_private { display:block; height:26px; width:26px; border-radius:18px; overflow:hidden; }
.private_logs .chat_image { height:70px; max-width:100%; }
.private_logs .sticker_chat { height:70px; max-width:100%; }
.ticker { display:table-cell; vertical-align:bottom; padding:0 4px 12px 4px; width:26px; }
.ticker img { width:18px; height:18px; border-radius:50%; }
.priwrap { display:table-cell; }
.prbox { width:auto; height:auto; }
.privopt { flex-grow:1; padding:0 5px; text-align:right; }
.privcont { width:100%; margin:0 auto; display:flex; height:auto; align-items: center; }
.prdate { padding:3px 5px; font-size:10px; }
.propt { display:table-cell; vertical-align:middle; }
.ppitem { cursor:pointer; }
.ppitem { font-size:16px; width:32px; padding:5px; cursor:pointer; float:left; text-align:center; }
.inpriv .prdate { text-align:right; }
.inpriv .ppitem { float:right; }
.inpriv .privopt { text-align:right; }
/* element css */
/* chat logs css */
.nogranted { display:none !important }
.ch_logs {
padding:5px;
word-wrap:break-word;
display:table;
width:100%;
table-layout:fixed;
max-width:100%;
overflow:hidden;
display:flex;
width:auto;
gap:35px
}
.other_logs {
padding:8px;
word-wrap:break-word;
display:table;
width:100%;
table-layout:fixed;
max-width:100%;
overflow:hidden
}
.chat_avatar {
display:table-cell;
width:40px;
vertical-align:top;
position:relative
}
.cavatar {
height:50px;
width:50px;
border-radius:50%;
display:block;
overflow:hidden
}
/*.ch_logs { padding:10px; word-wrap: break-word; display:table; width:100%; table-layout:fixed; max-width:100%; overflow:hidden; cursor:pointer; }*/
/*.other_logs{ padding:10px; word-wrap: break-word; display:table; width:100%; table-layout:fixed; max-width:100%; overflow:hidden; }*/
/*.chat_avatar { display:table-cell; width:40px; vertical-align:top; position:relative; }*/
/*.cavatar { height:40px; width:40px; border-radius:50%; display:block; overflow:hidden; cursor:pointer; }*/
/*text*/
.my_text {
display:table-cell;
vertical-align:top;
padding:0 0 0 6px;
position:relative
}
.my_text .username {
font-size:16px;
color:#55555
}
.chat_image {
max-width:130px;
height:auto;
width:auto;
margin:5px 0 0 0;
border-radius:5px
}
/**/
#show_chat ul { position:absolute; bottom:0; max-height:100%; overflow-y:auto; }
#show_chat li { position:relative; }
.logs_date {
font-size:10px
}
.cclear,.spclear {
display:table-cell;
vertical-align:middle;
text-align:left
}
.cdate {
display:table-cell;
font-size:11px;
vertical-align:middle;
text-align:right;
height:20px;
padding-top:4px;
padding-right:4px
}
.cname {
text-align:right;
overflow:hidden;
white-space:nowrap
}
.chat_rank {
display:inline-block;
width:auto;
height:13px;
margin:0 0 0 0
}
.special_delete {
font-size:13px;
position:absolute;
top:0;
right:0;
padding:5px
}
.emo_chat { height:24px; max-width:100%; vertical-align:bottom; }
.sticker_chat { height:80px; max-width:100%; vertical-align:bottom; }
.custom_chat { max-height:200px; max-width:400px; }
.chat_system { font-size:12px; }
.sysname { font-weight:bold; }
.topic_icon { display:table-cell; width:40px; vertical-align:top; position:relative; }
.tpicon { height:40px; width:40px; border-radius:50%; display:block; overflow:hidden; cursor:pointer; }
/* system logs */
.sys_log { padding:5px 10px; word-wrap: break-word; display:table; width:100%; table-layout:fixed; max-width:100%; overflow:hidden; }
.chat_savatar { display:table-cell; width:40px; vertical-align:top; position:relative; }
.savatar { height:24px; width:24px; border-radius:50%; display:block; overflow:hidden; cursor:pointer; margin:0 auto; }
/* line height for elements */
.chat_message { line-height:1.4em; display:inline-block; max-width:100%; }
.post_content { line-height:1.4em; }
/* empty zone css */
.empty_zone { padding:15px; margin:0 auto; text-align:center; }
.empty_zone_icon { width:64px; height:64px; }
.empty_zone_text { font-size:13px; margin-top:10px; }
.empty_small_icon { width:50px; height:50px; }
/* post css */
.main_post_control { display:table; table-layout:fixed; width:100%; height:40px; }
.main_post_item { display:table-cell; vertical-align:middle; width:40px; font-size:20px; position:relative; text-align:center; }
.main_post_button { display:table-cell; vertical-align:middle; text-align:right; }
.post_emo_content { max-height:110px; overflow:hidden; overflow-y:auto; }
.post_emo_content .emoticon img { height:100%; width:auto; }
.reply_item { display:table; table-layout:fixed; width:100%; word-wrap:break-word; padding:10px; border-radius:10px; }
.reply_avatar { display:table-cell; vertical-align:top; width:32px; }
.reply_avatar img { width:32px; height:32px; border-radius:50%; display:block; cursor:pointer; }
.reply_content { display:table-cell; vertical-align:top; padding:0 5px; }
.reply_content img { max-height:160px; }
.reply_delete { text-align:center; width:30px; cursor:pointer; }
.post_title { display:table; table-layout:fixed; width:100%; }
.post_avatar { display:table-cell; vertical-align:middle; width:36px; }
.post_avatar img { width:36px; height:36px; border-radius:50%; display:block; cursor:pointer; }
.post_content { display:table; table-layout:fixed; width:100%; padding:10px 0; word-wrap: break-word; }
.post_control { display:table; table-layout:fixed; width:100%; padding:5px 0; }
.post_element { height:auto; padding:15px 0; margin:0 auto; }
.post_edit { cursor:pointer; width:40px; font-size:15px; position:relative; }
.comment_count { text-align:right; cursor:pointer; }
.do_comment { width:50px; text-align:center; cursor:pointer; }
.like_count { float:left; cursor:pointer; padding:5px; border-radius:50px; }
.show_reply { height:auto; overflow:hidden; margin-bottom:10px;}
.more_comment { cursor:pointer; display:block; padding:8px 0; }
.more_comment:hover { text-decoration:underline; }
.post_image { display:table; table-layout:fixed; width:100%; margin:10px 0; }
.post_image img { max-width:100%; max-height:350px; width:auto; height:auto; }
.post_audio { margin:10px 0; }
.post_audio_save, .post_video_save, .post_zip { width:100%; height:60px; margin:10px 0; }
.post_audio_save img, .post_video_save img, .post_zip img { height:100%; display:block; }
.post_audio audio { width:100%; }
.post_video { width:100%; height:250px; margin:10px 0; }
.post_video_save { width:100%; height:60px; margin:10px 0; }
.post_video video { height:100%; width:100%; max-width:100%; display:block; }
.add_comment_zone { clear:both; }
.add_comment { border-radius:50px; }
.post_input_container { border-radius:10px; }
.panel_wrap { padding:15px 15px 30px 15px; }
.up_data { display:inline-block; position:relative; }
.up_file { display:table; position:relative; table-layout:fixed; width:100%; }
.up_file_content { display:table-cell; position:relative; }
.up_file_control { display:table; width:24px; height:24px; position:absolute; top:-5px; right:-5px; }
.up_file_remove { width:24px; height:24px; display:table-cell; text-align:center; vertical-align:middle; font-size:13px; cursor:pointer; border-radius:50%; }
.up_audio { width:200px; max-width:100%; }
.up_video { height:120px; border-radius:5px; }
.up_image { max-height:50px; max-width:100%; border-radius:5px; display:block; }
#friend_post, #news_data { height:120px; border:none; overflow:hidden; background:none !important; border:none !important; }
#wall_file, #news_file { -webkit-appearance:none; position:absolute; top:0; left:0; opacity:0; width:100%; height:100%; cursor:pointer; padding:0px !important; }
.like_icon, .comment_icon { width:20px; height:20px; display:inline-block; vertical-align:middle; margin-top:-2px; }
.wlike_icon { width:20px; height:20px; vertical-align:middle; }
.plike_text { vertical-align:middle; }
.post_menu { display:none; position:absolute; top:100%; right:0; width:220px; text-align:left; z-index:1; }
.post_menu_item { padding:8px 10px; }
.post_element .emo_chat { height:18px; }
/* video in post css */
.video_container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin:5px 0 0 0; clear:both; }
.video_container iframe, .video_container object, .video_container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#move_video, #move_audio { cursor:pointer; }
/* video in chat post */
.chat_video_container { width:200px; height:113px; position:relative; margin-top:5px; border-radius:8px; overflow:hidden; }
.private_logs .chat_video_container { width:200px; height:113px; position:relative; margin-top:5px; border-radius:8px; overflow:hidden; }
.chat_video { width:100%; height:100%; display:block; }
.chat_cvideo { width:50px; height:50px; display:block; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); }
.cqmess .chat_video_container { width: 140px; height:80px; margin-top:2px; }
.cqmess .chat_cvideo { width:35px; height:35px; }
/* stream css */
#wrap_stream { width:560px; height:315px; border-top:1px solid #333; }
#wrap_stream iframe { width:100%; height:100%; border:none; padding:0; margin:0; }
#wrap_stream video { width:100%; height:100%; border:none; padding:0; margin:0; }
#container_stream { width:560px; height:355px; z-index:160; position:fixed; top:100px; left:50%; margin-left:-240px; margin-top:0px; display:none; }
.vidopt { height:40px; width:40px; font-size:18px !important; color:#fff; text-align:center; cursor:pointer; }
#mstream_img { display:block; margin:0 auto; width:30px; height:30px; border-radius:50%; }
.streamhide { display:none !important; }
.streamout { left:-10000px !important; }
#wrap_stream_audio { width:300px; height:auto; border-top:1px solid #333; }
#wrap_stream_audio audio { width:100%; border:none; padding:0; margin:0; }
#container_stream_audio { width:300px; height:auto; z-index:160; position:fixed; top:100px; left:50%; margin-left:-150px; margin-top:0px; display:none; }
.over_stream { z-index:1100 !important; }
/* header css */
#header2 { width:100%; height:50px; margin:0 auto; position:fixed; z-index:4; }
#header_full { width:100%; height:50px; position:fixed; z-index:202; }
#wrap_main_header { max-width:1100px !important; margin:0 auto; height:100%; }
#wrap_full_header { height:100%; padding:0 10px; }
#chat_head { height:50px; padding:0 5px; width:100%; display:table; table-layout:fixed; }
.empty_subhead { width:100%; height:50px; }
.stat_av { width:40px; height:40px; border-radius:50%; }
.top_status { width:12px; height:12px; border-radius:50%; display:block; position:absolute; bottom:8px; left:3px; border:1px solid #fff; background:#fff; }
/* menu css */
#main_header { display:table; table-layout:fixed; width:100%; height:100%; }
#main_mob_menu { display:table-cell; vertical-align:middle; width:42px; position:relative; cursor:pointer; }
#open_login_menu { width:50px; font-size:24px; position:relative; }
.head_logo, .chat_head_logo { display:table-cell; vertical-align:middle; width:152px; white-space:nowrap; }
.head_logo img, .chat_head_logo img { height:40px; width:auto; display:block; }
.head_option { display:table-cell; width:40px; vertical-align:middle; font-size:16px; text-align:center; position:relative; cursor:pointer; }
.notif_zone { height:100%; }
/* cookie bar */
.cookie_wrap { position:fixed; display:table; padding:25px; z-index:9999; width:80%; left:10%; border-radius:10px; bottom:15px; }
.cookie_img { display:table-cell; vertical-align:middle; width:60px; }
.cookie_img img { width:60px; display:block; }
.cookie_text { display:table-cell; vertical-align:middle; padding:0 10px; }
.cookie_button { display:table-cell; width:120px; vertical-align:middle; padding:0 10px; }
/* badge css */
.pbadge { width:40px; height:40px; margin-bottom:2px; display:grid; align-items:center; float:left; position:relative; border-radius:10px; }
.pbadge_img { width:40px; max-height:40px; margin:0 auto; position:relative; }
.pbadge_count { width:18px; height:18px; position:absolute; bottom:0; right:0; border-radius:50px; background:#666; color:#fff; font-size:10px; }
.badge_box_count { width:40px; height:40px; margin-left:-40px; }
.badge_info_icon { width:40px; }
.badge_info_icon img { height:40px; }
/* language box */
.lang_flag { width:26px; height:auto; display:block; margin:0 auto; border-radius:3px; }
.intro_lang { width:26px; height:auto; display:block; margin:0 auto; border-radius:3px; }
.lang_flag_box { width:40px; }
.lang_lang { padding:10px 5px; }
/* list css */
.drop_list { display:none; cursor:pointer; }
.user_count { display:table; table-layout:fixed; width:100%; padding:10px; font-size:13px; font-weight:normal; font-weight:bold; }
.ucount { border-radius:50px; padding:4px 7px; font-size:11px; }
/* opaque color */
.user_item:hover { opacity:1 !important; }
/*friends module */
.user_square_elem { width:calc((100% / 6) - 10px); height:auto; position:relative; display:inline-block; margin:5px; overflow:hidden; border-radius:5px; overflow:hidden; }
.user_square_elem img { width:100%; display:block; height:auto; }
.square_name { position:absolute; bottom:0; left:0; width:100%; font-size:10px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding:2px 4px; border-radius:0 0 5px 5px; text-align:center; }
/* global wrap chat display */
#global_chat { display:table; width:100%; overflow:hidden;}
/* chat left css */
#chat_left { height:100%; overflow:hidden; overflow-y: auto; max-width:100% !important; }
.cleft, .cleft2 { width:200px; max-width:100%; }
.cleft { overflow:hidden; padding:0; display:table-cell; vertical-align:top; box-shadow:none !important; }
.cleft2 { position:absolute; top:51px; left:0; top:0px; z-index:201; padding-bottom:0; }
.left_hide { display:none !important; }
.left_top_menu { height:40px; }
.left_bar_option { cursor:pointer; }
.left_head_empty { padding:0 10px; font-weight:bold; }
#chat_left_data { width:100%; position:relative; overflow:hidden; overflow-y:auto; }
/* chat center css */
#chat_center { display:table-cell; vertical-align:top; overflow:hidden;}
/* chat right css */
.panel_bar { display:table; width:100%; table-layout:fixed; height:40px; }
.panel_bar_item, .panel_option, .left_bar_item { display:table-cell; vertical-align:middle; width:40px; text-align:center; cursor:pointer; }
#chat_right{ height:100%; }
.cright, .cright2 { width:280px; }
.cright { overflow:hidden; padding:0; display:table-cell; vertical-align:top; max-width:100% !important; box-shadow:none !important; }
.cright2 { position:absolute; top:51px; right:0; top:0px; overflow:hidden; z-index:201; padding-bottom:0px; display:none; max-width:100% !important; }
.large_panel { width:400px; }
#chat_right_content { width:100%;}
#chat_right_top { width:100%; height:43px; display:table; table-layout:fixed; }
#chat_right_data { overflow:hidden; overflow-y:auto; position:relative; width:100%; }
/* bottom menu css */
.footer_item { width:40px; height:100%; text-align:center; cursor:pointer; display:table-cell; max-width:16.66666666%; vertical-align:middle; position:relative; }
.privhide { display:none !important; }
.i_btm { font-size:20px;}
/* notification icons */
.foot_notify { position:absolute; top:10px; left:5px; width:11px; height:11px; border-radius:50%; display:none;}
.head_notify { position:absolute; top:16px; left:6px; width:11px; height:11px; border-radius:50px; display:none;}
.menu_notify { position:absolute; right:10px; padding:0 5px; border-radius:2px; font-size:13px; font-weight:bold; display:none; }
.pm_notify { padding:0 5px; border-radius:2px; font-size:14px; font-weight:bold;}
/* notification item */
.notify_item { display:table; table-layout:fixed; width:100%; padding:15px 10px; cursor:pointer; }
.notify_details { display:table-cell; padding:0 8px; }
.notify_status { display:table-cell; width:16px; font-size:13px; }
.notify_avatar { display:table-cell; vertical-align:top; width:40px; position:relative; }
.notify_avatar img { width:40px; height:40px; border-radius:50%; display:block; cursor:pointer; }
.date_notify { margin-top:2px; }
#notify_list { overflow:hidden; padding:0px; }
#notify_content { max-height:364px; overflow:hidden; overflow-y:auto; }
.notify_reaction, .notify_prolike, .notify_gold { width:16px; height:16px; vertical-align:bottom; margin-bottom:-2px; }
.notify_prolike { border-radius:50%; }
.notify_icon { width:22px !important; height:22px !important; position:absolute; top:22px; right:-2px; border-radius:50%; background:#fff; padding:1px; }
/* spinner box css */
.large_spinner { width:50px; height:50px; position:absolute; display:block; top:50%; left:50%; margin-left:-25px; margin-top:-25px; font-size:50px; }
.boom_spinner { width:100%; }
/* room option css */
.room_options { width:100%; padding:0 5px 15px 5px; }
.room_elem { display:table; padding:10px; cursor:pointer; overflow:hidden; position:relative; }
.room_celem { display:table; padding:8px; cursor:pointer; overflow:hidden; position:relative; }
.room_content { padding:0 0 0 10px; }
.room_name { font-size:16px; font-weight:bold; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.room_cname { font-size:14px; font-weight:bold; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.room_icon_wrap { width:60px; height:60px; }
.room_icon { width:60px; height:60px; border-radius:10px; display:block; }
.room_cicon_wrap { width:50px; height:50px; }
.room_cicon { width:50px; height:50px; border-radius:5px; display:block; }
.room_count { font-size:15px; font-weight:bold; text-align:right; }
.room_ccount { font-size:14px; font-weight:bold; text-align:right; }
.room_enter { width:20px; font-size:16px; text-align:center; }
.room_description { font-size:12px; padding:3px 0; }
.room_cdescription { font-size:11px; padding:1px 0; }
.room_img { width:100%; height:auto; display:block; }
.room_tag { width:16px; height:16px; border-radius:50%; display:block; margin:0 auto; }
.room_ctag { width:14px; height:14px; border-radius:50%; display:block; margin:0 auto; }
.roomopt { width:20px; }
.roomcopt { width:16px; }
.chat_rlist { position:relative; width:100%; height:100%; overflow-y:auto; }
.room_preview { width:120px; height:120px; border-radius:10px; }
.warn_icon { width:20px; }
.ricon_current_wrap { width:120px; display:table-cell; vertical-align:bottom; position:relative; }
.ricon_current { width:120px; height:120px; border-radius:10px; display:block; }
.ricon_control { position:absolute; display:table; table-layout:fixed; width:100%; z-index:40; width:80px; left:20px; border-radius:50px; bottom:10px; }
.ricon_button { display:table-cell; vertical-align:middle; text-align:center; width:40px; padding:8px 0; position:relative; }
/* player css */
.chat_player { display:table; table-layout:auto; }
.music_player { display:table; table-layout:fixed; height:100%; width:100%; }
.player_menu { display:table-cell; width:40px; font-size:18px; text-align:center; vertical-align:middle; }
.player_button { display:table-cell; width:36px; font-size:30px; text-align:center; vertical-align:middle; }
.player_sound { display:table-cell; width:40px; font-size:20px; text-align:center; vertical-align:middle; }
.player_current { display:table-cell; vertical-align:middle; padding:0 5px; width:100px; max-width:100px; line-height:1em !Important; }
.player_volume { display:table; table-layout:fixed; width:100%; height:40px; }
.player_list_container { padding:10px 0 5px 0; }
.player_change { width:40px; font-size:18px; text-align:center; }
.cur_play { padding-bottom:10px; }
#player_listing { max-height:160px; overflow-y:auto; }
#sound_display { width:26px; font-size:20px; }
#slider { width:100%; }
.splay_btn { width:36px; }
#current_play_btn { font-size:36px; }
.footer_play { font-size:35px; }
/* main menu top */
.avmmenu { width:40px; }
.avmmenu img { width:40px; height:40px; border-radius:8px; display:block; }
.gold_icon, .ruby_icon { width:18px; }
.gold_icon2, .ruby_icon2 { width:16px; }
.gold_icon img, .ruby_icon img { width:18px; height:18px; display:block; }
.gold_icon2 img, .ruby_icon2 img { width:16px; height:16px; display:block; }
.gold_text, .ruby_text { font-size:16px; }
.gold_text2, .ruby_text2 { font-size:16px; }
.editstatus { width:36px; }
.menuname { font-size:16px; font-weight:bold; }
.stat_icon { width:18px; height:18px; border-radius:50%; background:#fff; display:block; margin:0 auto; }
.stat_icon img { display:block; width:100%; height:100%; border-radius:50%; }
.menuranking { height:11px; width:auto; }
.menuranktxt { font-size:11px; }
/* left menu top */
.roomcv { width:40px; }
.roomcv img { width:40px; height:auto; border-radius:3px; display:block; }
.mroom_name{ font-size:16px; font-weight:bold; }
.mroom_text { font-size:11px; }
.mroom_change { width:24px; font-size:18px; text-align:center; }
/* item custom */
.action_item { margin-bottom:3px; border-radius:5px; }
.radio_item { margin-bottom:3px; }
.reply_item { margin-bottom:3px; }
.ulist_item { margin-bottom:3px; }
.docu_box { margin-bottom:3px; }
.report_item { margin-bottom:5px; }
.card_button { margin-bottom:5px; }
.ui-widget-content { border:none; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border:none; }
.ui-state-active,.ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border:none; }
.ui-corner-all { border-radius:10px; }
.ui-slider-horizontal { height:7px; }
.ui-slider-horizontal .ui-slider-handle { cursor:pointer; }
.sound_display { text-align:left; margin-left:15px; }
/* profile css */
.choose_avatar, .choose_cover { position:relative; }
.avatar_select { -webkit-appearance:none; position:absolute; top:0; left:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.cover_select { -webkit-appearance:none; position:absolute; top:0; left:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.cover_size { height:250px; }
.state_profile { width: 16px; height: 16px; position: absolute; bottom: 5px; right:5px; z-index: 30; border: 2px solid #fff; border-radius: 50px; }
.state_note { width: 16px; height: 16px; position: absolute; bottom: 5px; left:5px; z-index: 30; }
.proicon { width:26px; }
.proitem { padding:12px; }
.prodata { width:50%; }
.mobpico { font-size:18px; }
.vfavatar { height:110px; max-width:100%; border-radius:10px; display:block; margin:0 auto; }
/* lookup css */
.scanbtn { width:30px; font-size:18px; text-align:center; }
/* sub reg menu */
.reg_menu_container { position:relative; }
.reg_menu { font-size:0px; }
.reg_menu ul li { display:inline-block; padding:8px 10px; border-radius:3px; cursor:pointer; font-size:13px; font-weight:bold; }
/* sub lined menu */
.line_menu { position:relative; }
.line_menu { font-size:0px; }
.line_menu ul li { display:inline-block; padding:8px 10px; font-size:15px; cursor:pointer; }
/* pro top details */
.pdetails { display:table; table-layout:fixed; width:100%; }
.pdetails_icon { display:table-cell; vertical-align:middle; width:24px; cursor:pointer; }
.pdetails_text { display:table-cell; vertical-align:middle; overflow:hidden; white-space:nowrap; }
/* tab menu */
.tab_menu { font-size:0px; padding:5px 10px; margin-bottom:5px; }
.tab_menu ul li { display:inline-block; padding:8px 15px; cursor:pointer; font-size:13px; font-weight:bold; border-radius:5px; margin:5px; }
/* modal menu */
.modal_menu { font-size:0px; padding:10px 0; }
.modal_menu ul li { display:inline-block; padding:8px 12px; cursor:pointer; font-weight:bold; font-size:13px; margin:0 5px 0 0; border-radius:5px; }
/* profile box */
.modal_top_menu { display:table; width:100%; table-layout:fixed; margin:5px 0 5px 0; padding:0 5px; }
.modal_top_item { display:table-cell; width:40px; height:40px; vertical-align:middle; font-size:20px; text-align:center; cursor:pointer; position:relative; }
.modal_top_menu_empty { display:table-cell; vertical-align:middle; width:10px; }
.cover_menu { display:table-cell; vertical-align:middle; width:80px; }
.cover_item_wrap { display:table; border-radius:50px; overflow:hidden; }
.cover_item { width:40px; height:30px; display:table-cell; vertical-align:middle; text-align:center; }
.profile_background { background-size:cover !important; background-position:50% 50% !important; }
.hide_zone { display:none; }
.modal_wrap_top { position:relative; display:table; table-layout:fixed; width:100%; }
.profile_top { padding:0 15px 15px 15px; position:relative; height:100%; }
.profile_avatar { display:table-cell; width:130px; vertical-align:bottom; position:relative; border-radius:5px; text-align:center; }
.avatar_profile { width:130px; height:130px; cursor:pointer; display:block; border-radius:5px; }
.avatar_button { display:table-cell; vertical-align:middle; text-align:center; padding:8px 0; position:relative; }
.profile_tinfo { display:table-cell; vertical-align:bottom; padding:0 10px; position:relative; }
.pro_name { font-size:25px; font-weight:bold; width:100%; overflow:hidden; white-space:nowrap; }
.pro_name_icon { width:18px; height:18px; display:block; }
.pro_ranking { height:14px; width:auto; }
.pro_mute { height:15px; width:auto; }
.pro_rank { font-size:14px; margin-bottom:-3px; font-weight:bold; display:block; }
.pro_mood { font-size:12px; font-weight:bold}
.add_cover { position:relative; }
.profile_info_box { font-size:11px; padding:10px 15px; }
.level_profile { text-align: center; position: absolute; bottom: 0; left: 0; width: 100%; padding: 7px 0; }
.pro_flag { display:inline-block; height:12px; }
.proli { width:160px; }
.avatar_control { position:absolute; display:table; table-layout:fixed; width:100%; z-index:40; width:80px; left:27px; border-radius:50px; bottom:10px; }
.avatar_spin { border-radius:10px; overflow:hidden; position:relative; z-index:30; }
/* upload box css */
.up_input { -webkit-appearance:none; position:absolute; top:0; left:0; opacity:0; width:100%; height:100%; cursor:pointer; padding:0px !important; overflow:hidden; }
/* report box */
.report_item { display:table; table-layout:fixed; width:100%; }
.report_check { display:table-cell; width:30px; text-align:center; vertical-align:middle; font-size:20px;}
.report_text { display:table-cell; vertical-align:middle; padding:0 5px; }
/* report report css */
.head_report { display:table; table-layout:fixed; width:100%; }
.report_name { display:table-cell; vertical-align:middle; padding:0 5px; }
.report_avatar { display:table-cell; vertical-align:middle; width:36px; }
.report_avatar img { width:36px; height:36px; border-radius:50%; display:block; cursor:pointer; }
.prep_avatar { display:table-cell; vertical-align:top; width:30px; }
.prep_avatar img { width:30px; height:30px; border-radius:50%; display:block; cursor:pointer; }
/* section css */
.empty_zone { width:100%; }
/* other account */
.othera { margin:0px 8px 5px 0px; display:inline-block; }
/* upload progress */
#private_progress { display:none; }
#main_progress { display:none; }
.uprogress { width:140px; background:#666; color:#fff; position:absolute; top:5px; left:5px; border-radius:5px; overflow:hidden; }
.uprogress_wrap { width:140px; height:30px; position:relative; }
.uprogress_progress { width:0%; height:30px; background:#74b20e; }
.uprogress_content { width:140px; height:30px; position:absolute; top:0; left:0; }
.uprogress_text { padding:0 10px; }
.uprogress_icon { width:40px; text-align:center; }
/* input extra */
#main_input_extra {
width:auto;
position:absolute;
bottom:45px;
left:44px;
z-index:100;
padding:3px;
display:none;
border-radius:5px;
max-width:240px
}
.sub_options { width:46px; height:46px; padding:5px; margin:3px; float:left; position:relative; cursor:pointer; }
.sub_options:hover { padding:0px; transition: all 0.3s; }
.sub_options img { width:100%; height:auto; }
/* private input extra */
#priv_input_extra { width:auto; position:absolute; bottom:0; left:0; z-index:100; padding:3px; display:none; border-radius:5px; max-width:240px; margin:5px; }
.psub_options { width:40px; height:40px; padding:5px; margin:3px; float:left; position:relative; cursor:pointer; }
.psub_options:hover { padding:0px; transition: all 0.3s; }
.psub_options img { width:100%; height:auto; }
/* emoticon panels */
#main_emoticon {
width:356px;
max-width:100%;
height:222px;
position:absolute;
bottom:0;
left:-45px;
z-index:100;
display:none;
margin:50px;
}
#private_emoticon { width:calc(100% - 10px); border-radius:5px; height:200px; position:absolute; bottom:0; left:0; z-index:100; display:none; margin:5px; }
.emo_head { width:100%; height:40px; display:table; table-layout:fixed; }
.emo_content { width:100%; height:180px; overflow:hidden; overflow-y: auto; padding:5px; }
.sticker { height:48px; float:left; margin:6px; }
.emoticon { height:24px; float:left; margin:5px; }
.custom_emo { max-width:48px; max-height:48px; float:left; margin:6px; }
.emo_content .emoticon img { height:100%; width:auto; }
.emo_content .sticker img { height:100%; }
.emo_content .custom_emo img { max-width:48px; max-height:48px; }
.emo_menu { width:40px; height:100%; cursor:pointer; text-align:center; font-size:18px; display:table-cell; vertical-align:middle; }
.emo_select { height:40px; width:40px; display:block; }
.empty_emo { display:table-cell; height:40px; }
.emo_content_priv { width:100%; height:160px; overflow:hidden; overflow-y: auto; padding:5px; }
.emo_content_priv .emoticon img { height:100%; width:auto; }
.emo_content_priv .sticker img { height:100%; }
.emo_content_priv .custom_emo img { max-width:48px; max-height:48px; }
.emoticon, .sticker, .custom_emo { cursor:pointer; }
.emo_result { min-height:240px; max-height:400px; }
/* admin section css */
.saved_data { padding:15px; font-size:24px; text-align:center; position:fixed; top:0; left:0; width:100%; display:none; z-index:1002; }
.ex_admin { padding:5px 0 0 0; font-style:italic; font-size:13px;}
.admin_search { display:table; width:100%; overflow:hidden; border-radius:3px; }
.admin_search_btn { display:table-cell; width:50px; text-align:center; cursor:pointer; }
.edit_verify { margin-top:8px; }
/* other element */
.sp_box { width:calc(50% - 10px); display:block; float:left; margin:5px; overflow:hidden; cursor:pointer; border-radius:5px; }
.sp_content { width:100%; display:table; table-layout:fixed; }
.sp_icon { width:70px; font-size:30px; text-align:center; padding:20px 0; }
.sp_info { padding:0 10px; }
.sp_title { font-size:12px; }
.sp_count { font-size:26px; font-weight:bold; }
/* container cam */
#container_call { z-index:201; position:fixed; top:80px; left:10px; margin-left:0px; margin-top:0px; display:none; }
.videosize { height:400px; }
.audiosize { height:120px; }
.callsize { width:360px; }
.biframe { padding:0; margin:0; border:0; display:block; }
.vcallhide { display:none !important; }
#vcall_streams { height: 100%; width:100%; }
#vcall_self { width:80px; height:100px; position:absolute; top:10px; left:10px; border-radius:10px; overflow:hidden; }
.vcall_self { width:140px !important; height:160px !important; }
.vcall_player { width: 100%; height: 100%; overflow: hidden; }
.vcall_container { width:100%; height:100%; }
.vcall_user { display:flex; align-items: center; column-gap: 0.5em; padding: 5px 10px; border-radius: 5px; position: absolute; top: 10px; right: 10px; z-index: 9999; margin: 0; font-size: 18px; }
.vcall_vol{ height:20px; width:20px; }
#vcall_control { display:table; width:100%; position: absolute; bottom: 15px; left: 0; }
.vcall_btn { width:30px; text-align: center; cursor: pointer; padding:10px; border-radius:5px; }
.vcall_spacer { width:15px; }
.vcall_icon { display: block; height: 18px; width: 18px; }
.call_status_btn { padding:5px 10px; border-radius:5px; display:inline-block; font-size:13px; max-width:100%; text-align:center; }
/* sub mobile menu and subpage */
#open_sub_mobile { display:none; width:36px; vertical-align:middle; text-align:center; font-size:24px; }
#close_sub_mob { height:100%; display:table; width:100%; cursor:pointer; }
#close_sub { display:table-cell; vertical-align:middle; text-align:right; padding:0 10px; font-size:22px; }
/* private modal box */
.p_data { display:table; table-layout:fixed; width:100%; height:auto; }
.p_item { display:table-cell; vertical-align:middle; width:24px; font-size: 20px; }
.p_empty { display:table-cell; }
.get_info { cursor:pointer; }
/* modal css */
.small_modal_out, .large_modal_out{ display:none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); cursor:pointer; }
.over_modal_out, .over_emodal_out { display:none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); cursor:pointer; }
.small_modal_in { border-radius:5px; margin: 5% auto; max-width:400px; width: 94%; position:relative; }
.large_modal_in { border-radius:5px; margin: 5% auto; max-width:500px; width: 94%; position:relative; }
.over_modal_in { border-radius:5px; margin: 6% auto; max-width:500px; width: 94%; position:relative; }
.over_emodal_in { border-radius:3px; margin: 6% auto; max-width:500px; width: 94%; position:relative; }
.modal_top { width:100%; display:table; table-layout:fixed; }
.modal_top_text { display:table-cell; font-size:15px; vertical-align:middle; }
.modal_top_empty { display:table-cell; vertical-align:middle; font-size:15px; padding:0 5px; }
.modal_top_element { display:table-cell; width:40px; height:40px; text-align:center; vertical-align:middle; font-size:18px; }
.avatar_top_mod { display:table-cell; text-align:center; vertical-align:middle; width:40px; height:50px; padding:5px; }
.avatar_top_mod img { display:block; margin:0 auto; width:100%; border-radius:50%; }
.avatar_top_name { display:table-cell; padding:0 5px 0 2px; font-size:14px; vertical-align:middle; font-weight:bold; }
.modal_pad { padding:36px 20px 20px 20px; }
.modal_control { padding-top:15px; padding-bottom:10px; }
.modal_title { font-size:16px; font-weight:bold; padding-bottom:15px; }
.modal_close {
width: 100%;
height: 36px;
position: relative;
top: 0px;
font-size: 18px;
display: table;
text-align: left;
padding-left: 20px;
border-radius: 5px 5px 0 0;
}
.modal_user { margin-top:-10px; margin-bottom:10px; }
.modal_user_avatar { width:40px; height:40px; }
.modal_user_avatar img { width:40px; height:40px; border-radius:50%; }
/* tab error */
.tab_error_out{ display:none; position: fixed; z-index: 1200; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); cursor:pointer; }
.tab_error_in { border-radius:3px; margin: 5% auto; max-width:400px; width: 98%; }
/* console css */
.console_reason img { max-height:40px; }
.console_reason .chat_video_container { max-width:200px !important; }
/* quote control css */
.qwraper { position:absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; bottom:50px; display:block; width:220px; border-radius:10px; display:none; }
.qcontrol { display:table; width:100%; height:46px; padding:5px; table-layout:fixed; }
.qavatarwrap { display:table-cell; vertical-align:middle; width:36px; height:36px; }
.qavatar { width:36px; height:36px; border-radius:50%; display:block; }
.qusername_wrap { display:table-cell; vertical-align:middle; padding:0 5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.qcancel { display:table-cell; vertical-align:middle; width:30px; font-size:16px; text-align:center; }
/* main logs quote */
.cqbox { width:100%; margin-top:3px; }
.cquote { padding:6px; border-radius:5px; display:inline-block; max-width:100%; }
.cqwrap { display:table; table-layout:auto; }
.cqav { display:table-cell; width:24px; vertical-align:top; }
.cqav img { display:block; width:24px; height:24px; border-radius:50%; }
.cqcontent { display:table-cell; padding:0 5px; }
.cqname { font-size:11px; font-weight:bold; }
.cqmess { font-size:13px; }
.cqmess .chat_image { height:50px; max-width:100%; margin: 3px 0 0 0; }
.cqmess .emo_chat { margin-bottom:-3px; height:18px; }
/* vip module css */
.vip_table_list { display:block; margin:0 auto; }
.vip_price_cell { width:100px; padding:0 10px; }
.vip_checkbox { width:40px; font-size:24px; text-align:center; }
.avatar_vip { width:80px; height:80px; border-radius:50%; }
/* avatar gender */
.avagen { border:2px solid; box-sizing:border-box; }
/* whisper css */
#whisper_controller { position:absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; bottom:5px; display:block; width:190px; border-radius:100px; display:none; }
/* file upload */
.chat_file { height:50px; margin-top:5px; cursor:pointer; display:inline-block; }
.cqmess .chat_file { height:40px; cursor:pointer; }
/* info pop */
.infopop { font-size:15px; }
/* extra settings for first-child and last-child */
.sub_list:first-child,
.avitem:first-child { border-top: none !important; }
.sub_list:last-child, .blisting:last-child, .blist:last-child, .bmenu:last-child, .submenu:last-child, .bpmenu:last-child,
.avitem:last-child, .log2:last-child, .nobborder { border-bottom: none !important; }
/* forced element overwrite */
.bwidth20 { width:20%; }.bwidth25 { width:25%; }.bwidth33 { width:33%; }.bwidth50 { width:50%; }.bwidth66 { width:66%; }.bwidth100 { width:100%; }
.pwidth10 { width:10px; }.pwidth20 { width:20px; }.pwidth30 { width:30px; }.pwidth40 { width:40px; }.pwidth50 { width:50px; }.pwidth60 { width:60px; }.pwidth70 { width:70px; }.pwidth80 { width:80px; }.pwidth90 { width:90px; }.pwidth100 { width:100px; }
.square20 { width:20px; height:20px; }.square30 { width:30px; height:30px; }.square40 { width:40px; height:40px; }.square50 { width:50px; height:50px; }.square60 { width:60px; height:60px; }.square70 { width:70px; height:70px; }.square80 { width:80px; height:80px; }.square90 { width:90px; height:90px; }.square100 { width:100px; height:100px; }
.btauto { table-layout:auto; }
.bcauto { width:1%; white-space:nowrap; }
.bbreak { word-break: break-word; }
/* fancy bg */
.fancybox-bg { opacity:.6 !important; }
/* docu box */
.docu_box { border-radius:3px; }
.docu_head { padding:15px; cursor:pointer; border-radius:5px; font-weight:bold; font-size:13px; }
.docu_content { padding:20px 0; display:none; }
.docu_content_view { padding:0; }
.docu_content img, .docu_content_view img { max-width:100%; }
.docu_title { padding:5px 10px; font-weight:bold; font-size:13px; }
.docu_description { padding:5px 10px; font-size:13px; }
.docu_sub_list { padding:10px; margin-left:10px; }
.docu_sub_list li { list-style:disc; }
.docu_intro_text { font-size:13px; padding:10px; }
.doc_zone { padding:5px; margin-bottom:10px; margin-top:10px; font-weight:bold; }
/* title box */
.title_icon { width:20px; height:20px; }
.title_icon img { width:20px; height:20px; }
.title_text { font-size:18px; font-weight:bold; padding:0 8px; }
/* profile likes */
.plike_item { float:left; padding:3px 5px; margin-right:5px; border-radius:100px; cursor:pointer; }
.plike_item img { width:18px; height:18px; border-radius:50%; display:inline-block; vertical-align:middle; margin-right:1px; }
.plike_count { font-size:12px; font-weight:bold; padding:0 2px; }
/* profile level */
.plevel_item { float:left; padding:3px 5px; margin-right:5px; border-radius:100px; cursor:pointer; }
.plevel_item img { width:18px; height:18px; border-radius:50%; display:inline-block; vertical-align:middle; margin-right:1px; }
.plevel_count { font-size:12px; font-weight:bold; padding:0 2px; }
/* card level */
.clevel_item { float:left; padding:3px 5px; margin-right:5px; border-radius:100px; cursor:pointer; }
.clevel_item img { width:18px; height:18px; border-radius:50%; display:inline-block; vertical-align:middle; margin-right:1px; }
.clevel_count { font-size:12px; font-weight:bold; padding:0 2px; }
/* progress bar */
.progress_box { width: 100%; background-color:rgba(0,0,0,0.5); border-radius:10px; overflow:hidden; cursor:pointer; }
.progress_bar { width: 50%; height: 30px; background-color: #74b20e; text-align: center; line-height: 30px; color: white; }
/* special log */
.splog { padding:15px 10px; }
.sptext, .tptext { margin-top:2px; }
.my_notice { padding:3px 10px; display:inline-block; line-height:1em; margin-top:2px; border-radius:20px; font-weight:normal; }
/* icon size */
.tiny_icon { width:16px; height:16px; }
.xsmall_icon { width:24px; height:24px; }
.small_icon { width:32px; height:32px; }
.reg_icon { width:50px; height:50px; }
.med_icon { width:64px; height:64px; }
.large_icon { width:100px; height:100px; }
.xlarge_icon { width:140px; height:140px; }
/* avatar size */
.small_avatar { width:40px; height:40px; }
.med_avatar { width:64px; height:64px; }
.large_avatar { width:100px; height:100px; }
/* warning box */
.boom_alert { position:relative; border-radius:5px; padding:12px 15px; border:1px solid transparent; width:100%; }
/* radius border for item */
.blist, .blisting { border-radius:0px; }
.brad0 { border-radius:0px; }
.brad2{ border-radius:2px; }
.brad3{ border-radius:3px; }
.brad5{ border-radius:5px; }
.brad8{ border-radius:8px; }
.brad10{ border-radius:10px; }
.brad50 { border-radius:50%; }
.brad100 { border-radius:200px; }
/* global element css */
.pad_box { padding:15px; }
.clearbox { overflow-y:auto; }
.nopad { padding:0px; }
.noborder { border:none !important; }
.mauto { margin:0 auto; }
.bclear { clear:both; }
.clear { width:100%; height:1px; clear:both; }.clear3 { width:100%; height:3px; clear:both; }.clear5 { width:100%; height:5px; clear:both; }.clear10 { width:100%; height:10px; clear:both; }.clear15 { width:100%; height:15px; clear:both; }.clear20 { width:100%; height:20px; clear:both; }.clear25 { width:100%; height:25px; clear:both; }.clear30 { width:100%; height:30px; clear:both; }
.tmargin3 { margin-top:3px; }.tmargin5 { margin-top:5px; }.tmargin10 { margin-top:10px; }.tmargin15 { margin-top:15px; }.tmargin20 { margin-top:20px; }.tmargin25 { margin-top:25px; }.tmargin30 { margin-top:30px; }
.bmargin3 { margin-bottom:3px; }.bmargin5 { margin-bottom:5px; }.bmargin10 { margin-bottom:10px; }.bmargin15 { margin-bottom:15px; }.bmargin20 { margin-bottom:20px; }.bmargin25 { margin-bottom:25px; }.bmargin30 { margin-bottom:30px; }
.lmargin3 { margin-left:3px; }.lmargin5 { margin-left:5px; }.lmargin10 { margin-left:10px; }.lmargin15 { margin-left:15px; }.lmargin20 { margin-left:20px; }.lmargin25 { margin-left:25px; }.lmargin30 { margin-left:30px; }
.rmargin3 { margin-right:3px; }.rmargin5 { margin-right:5px; }.rmargin10 { margin-right:10px; }.rmargin15 { margin-right:15px; }.rmargin20 { margin-right:20px; }.rmargin25 { margin-right:25px; }.rmargin30 { margin-right:30px; }
.vmargin5 { margin-top:3px; margin-bottom:3px; }.vmargin5 { margin-top:5px; margin-bottom:5px; }.vmargin10 { margin-top:10px; margin-bottom:10px; }.vmargin15 { margin-top:15px; margin-bottom:15px; }.vmargin20 { margin-top:20px; margin-bottom:20px; }.vmargin25 { margin-top:25px; margin-bottom:25px; }.vmargin30 { margin-top:30px; margin-bottom:30px; }
.hmargin5 { margin-left:3px; margin-right:3px; }.hmargin5 { margin-left:5px; margin-right:5px; }.hmargin10 { margin-left:10px; margin-right:10px; }.hmargin15 { margin-right:15px; margin-right:15px; }.hmargin20 { margin-right:20px; margin-right:20px; }.hmargin25 { margin-right:25px; margin-right:25px; }.hmargin30 { margin-right:30px; margin-right:30px; }
.nmargin3 { margin-top:-3px; }.nmargin5 { margin-top:-5px; }.nmargin10 { margin-top:-10px; }.nmargin15 { margin-top:-15px; }.nmargin20 { margin-top:-20px; }.nmargin25 { margin-top:-25px; }
.notpad3 { padding:0px 3px 3px 3px; }.notpad5 { padding:0px 5px 5px 5px; }.notpad10 { padding:0px 10px 10px 10px; }.notpad15 { padding:0px 15px 15px 15px; }.notpad20 { padding:0px 20px 20px 20px; }.notpad25 { padding:0px 25px 25px 25px; }.notpad30 { padding:0px 30px 30px 30px; }
.pad3 { padding:3px; }.pad5 { padding:5px; }.pad10 { padding:10px; }.pad15 { padding:15px; }.pad20 { padding:20px; }.pad25 { padding:25px; }.pad30 { padding:30px; }
.tpad0 { padding-top:0px; }.tpad3 { padding-top:3px; }.tpad5 { padding-top:5px; }.tpad10 { padding-top:10px; }.tpad15 { padding-top:15px; }.tpad20 { padding-top:20px; }.tpad25 { padding-top:25px; }.tpad30{ padding-top:30px; }
.bpad0 { padding-bottom:0px; }.bpad3 { padding-bottom:3px; }.bpad5 { padding-bottom:5px; }.bpad10 { padding-bottom:10px; }.bpad15 { padding-bottom:15px; }.bpad20 { padding-bottom:20px; }.bpad25 { padding-bottom:25px; }.bpad30 { padding-bottom:30px; }
.lpad0 { padding-left:0px; }.lpad3 { padding-left:3px; }.lpad5 { padding-left:5px; }.lpad10 { padding-left:10px; }.lpad15 { padding-left:15px; }.lpad20 { padding-left:20px; }.lpad25 { padding-left:25px; }.lpad30 { padding-left:30px; }
.rpad0 { padding-right:0px; }.rpad3 { padding-right:3px; }.rpad5 { padding-right:5px; }.rpad10 { padding-right:10px; }.rpad15 { padding-right:15px; }.rpad20 { padding-right:20px; }.rpad25 { padding-right:25px; }.rpad30 { padding-right:30px; }
.vpad0 { padding-top:0px; padding-bottom:0px; }.vpad3 { padding-top:3px; padding-bottom:3px; }.vpad5 { padding-top:5px; padding-bottom:5px; }.vpad10 { padding-top:10px; padding-bottom:10px; }.vpad15 { padding-top:15px; padding-bottom:15px; }.vpad20 { padding-top:20px; padding-bottom:20px; }.vpad25 { padding-top:25px; padding-bottom:25px; }.vpad30{ padding-top:30px; padding-bottom:30px; }
.hpad0 { padding-left:0px; padding-right:0px; }.hpad3 { padding-left:3px; padding-right:3px; }.hpad5 { padding-left:5px; padding-right:5px; }.hpad10 { padding-left:10px; padding-right:10px; }.hpad15 { padding-left:15px; padding-right:15px; }.hpad20 { padding-left:20px; padding-right:20px; }.hpad25 { padding-left:25px; padding-right:25px; }.hpad30 { padding-left:30px; padding-right:30px; }
/*css_app*/
.splog {
padding:15px 10px
}
.sptext {
margin-top:2px
}
.log2 {
}
.cavatar {
border-radius:0
}
.btablepx {
display:flex;
width:100%
}
.my_text {
position:relative;
padding:5px 30px!important;
border-radius:5px;
min-width:200px
}
.my_text::before {
content:" ";
position:absolute;
right:-19px;
top:12px;
color:#fff;
width:0;
height:0;
border:10px solid #000;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent
}
.my_text.chatbox-gold::before {
border-left-color:#f3d5d5
}
.my_text.chatbox-red::before {
border-left-color:#f3d5d5
}
.my_text.chatbox-green::before {
border-left-color:#e9f4d4
}
.my_text.chatbox-blue::before {
border-left-color:#d5eef5
}
.my_text.chatbox-purple::before {
border-left-color:#e9dcee
}
.my_text.chatbox-orange::before {
border-left-color:#f3e6d4
}
.my_text.chatbox-black::before {
border-left-color:#636363
}
.my_text.chatbox-pink::before {
border-left-color:#fdd1f8
}
.chatbox-black .username {
color:#f9faff
}
.chatbox-black .cdate {
color:#fff
}
.chatbox-pink .username {
color:#575757
}
.chatbox-pink .cdate {
color:#575757
}
.new-message {
opacity:0;
height:0;
padding:0px!important;
margin:0px!important
}
.K2_1 {
width:30%;
margin-left:-290px
}
.cdate {
font-family:'Tajawal',sans-serif;
font-size:14px
}
/*@keyframes k2 {*/
/* 40%, 44% {*/
/* transform: rotateZ(0);*/
/* }*/
/* 25% {*/
/* transform: rotateZ(-2deg);*/
/* }*/
/* 30% {*/
/* transform: rotateZ(2deg);*/
/* }*/
/* 35% {*/
/* transform: rotateZ(-2deg);*/
/* }*/
/* 20% {*/
/* transform: rotateZ(6deg);*/
/* }*/
/* 35% {*/
/* transform: rotateZ(-6deg);*/
/* }*/
/* 50%, 100% {*/
/* transform: rotateZ(0);*/
/* }*/
/*}*/
.flex {
display:flex;
justify-content:space-between
}
.k2boxis {
width:25%
}
.k2boxpr {
width:30%
}
.k2bo2 {
width:40%
}
.k2f {
font-family:'Tajawal',sans-serif;
font-size:15px
}
.AK2_1{font-size:15px; margin-right:9px;}
/* Custom edits by AhmedEx */
/* news pin */
.post_pin { cursor: pointer;
width: 40px;
font-size: 15px;
position: relative; }
.post_pin img { width:20px; height:20px; }
.my_text_topic {
position:relative;
padding:5px 30px!important;
border-radius:5px;
min-width:200px
}
.input_table {
direction: rtl; /* يجعل الكتابة والعناصر في جهة اليمين */
text-align: right; /* محاذاة النص إلى اليمين */
}
#main_input_box {
display: flex;
justify-content: flex-start; /* يجعل العناصر تبدأ من اليمين */
}
#content {
text-align: right; /* يضمن أن النص المُدخل يظهر في جهة اليمين */
direction: rtl;
}
.send_btn {
margin-left: 5px; /* يجعل زر الإرسال بعيدًا قليلاً عن مربع الإدخال */
}
.log2 {
background-color:#ff3d9df!important
}
#profile_box {
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 300px;
background-color: #fff;
padding: 15px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
display: none; /* مخفي افتراضيًا */
z-index: 9999;
}
/* badge css */
.pbadge {
width: 60px; /* زيادة العرض لاحتواء العنوان */
height: 40px;
margin-bottom: 2px;
display: grid;
align-items: center;
float: left;
position: relative;
border-radius: 10px;
padding-left: 5px; /* إضافة مسافة صغيرة بين العنوان والصورة */
}
.pbadge_img {
width: 30px; /* جعل حجم الرمز أصغر قليلاً ليناسب العنوان */
max-height: 30px;
margin: 0 auto;
position: relative;
}
.AK2_1{font-size:15px; margin-right:9px;}
.my_text.chatbox-basck221::before {
border-left-color:#ff8c00
}
.chatbox-basck221 .username {
color:#ffffef ;
}
.chatbox-basck221-text {
color:#ff8c00
}
.chatbox-basck221-text-border {
border:1px solid;
border-color:#1B1833;
}
.my_text.chatbox-basck211::before {
border-left-color:#ff8c00
}
.chatbox-basck211 .username {
color:#ff8c00;
}
.chatbox-basck211 {
background: linear-gradient(to left, #ff8c00);
border-left: 0px solid #ff8c00;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.chatbox-basck211-text {
color:#ff8c00
}
.chatbox-basck211-text-border {
border:1px solid;
border-color:#ff8c00;
}
.my_text.chatbox-bas90::before {
border-left-color:#4A4947
}
.chatbox-bas90 .username {
color:#FFFFFF;
}
.chatbox-bas90 {
background: linear-gradient(to left, #4A4947, #4A4947, #000000);
border-left: 0px solid #000000;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.chatbox-bas90-text {
color:#FFFFFF
}
.chatbox-bas90-text-border {
border:1px solid;
border-color:#FFFFFF;
}
.my_text.chatbox-basckk::before {
border-left-color: #F62817;
}
.chatbox-basckk .username {
color: #FFFFFF;
}
.chatbox-basckk {
background: linear-gradient(to left, #F62817, #F62817, #000000);
border-left: 0px solid #000000;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #F62817, /* تأثير التوهج الأحمر */
0px 0px 20px 6px #FFFFFF; /* تأثير التوهج الأبيض */
}
.chatbox-basckk-text {
color: #FFFFFF;
}
.chatbox-basckk-text-border {
border: 1px solid;
border-color: #856211;
box-shadow: 0px 0px 8px 2px #856211; /* تأثير التوهج على النص */
}
.my_text.chatbox-bak1::before {
border-left-color: #F62817;
}
.chatbox-bak1 .username {
color: #FFFFFF;
position: relative;
padding-right: 35px; /* مساحة لوضع الشارة بجانب الاسم */
font-family: 'Cairo', sans-serif;
font-size: 13px;
animation: moveName 5s linear infinite, lightningEffect 4s ease 1;
}
.chatbox-bak1 {
background: linear-gradient(to left, #F62817, #F62817, #000000);
border-left: 5px solid #000000;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0px 0px 10px 3px #F62817, 0px 0px 20px 6px #FFFFFF;
padding: 10px;
width: 100%;
max-width: 100%;
white-space: normal;
word-wrap: break-word;
overflow: hidden;
box-sizing: border-box;
}
.chatbox-bak1-text {
color: #FFFFFF;
font-family: 'Cairo', sans-serif;
animation: lightningEffect 1s ease 4;
}
.my_text.chatbox-black90::before {
border-left-color: #F62817;
}
.chatbox-black90 .username {
color: #FFFFFF;
position: relative;
padding-right: 35px; /* مساحة لوضع الشارة بجانب الاسم */
font-family: 'Cairo', sans-serif; /* تطبيق خط Cairo على الاسم العربي */
font-size: 13px; /* حجم الخط */
animation: moveName 5s linear infinite; /* تحريك الاسم بسرعة */
}
.chatbox-black90 {
background: linear-gradient(to left, #F62817, #F62817, #000000); /* خلفية متدرجة بالألوان */
border-left: 5px solid #000000; /* جعل الحدود ظاهرة */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #F62817, /* تأثير التوهج الأحمر */
0px 0px 20px 6px #FFFFFF; /* تأثير التوهج الأبيض */
padding: 10px; /* لإعطاء بعض المساحة داخل الصندوق */
width: 100%; /* جعل العرض بنسبة 100% ليتناسب مع المساحة المتاحة */
max-width: 100%; /* تأكد من أن العرض لن يتجاوز المساحة المتاحة */
white-space: normal; /* السماح بتفكيك النص الطويل داخل الصندوق */
word-wrap: break-word; /* الكسر التلقائي للنص عند الحاجة */
overflow: hidden; /* إخفاء أي نص يتجاوز الحدود */
box-sizing: border-box; /* لضمان أن الحشو لا يؤثر على الأبعاد الكلية للصندوق */
}
.chatbox-black90 .username::after {
content: '';
position: absolute;
top: 50%;
right: -30px; /* الموقع بالقرب من الاسم */
transform: translateY(-50%);
width: 24px; /* عرض الشارة */
height: 24px; /* ارتفاع الشارة */
background: url('https://path_to_lion_badge_image.png/') no-repeat center center; /* رابط شارة الأسد */
background-size: cover; /* لضمان تغطية الشارة بكامل المساحة */
}
.chatbox-black90-text {
color: #FFFFFF;
font-family: 'Cairo', sans-serif; /* تطبيق نفس الخط العربي على النص */
animation: popIn 0.5s ease-out; /* إضافة حركة النص */
}
/* تأثيرات النص داخل الحدود */
.chatbox-black90-text-border {
border: 1px solid;
border-color: #856211;
box-shadow: 0px 0px 8px 2px #856211; /* تأثير التوهج على النص */
animation: popIn 0.5s ease-out; /* تطبيق نفس الحركة على النص داخل الحدود */
}
/* حركة اسم المستخدم من اليسار لليمين */
@keyframes moveName {
0% {
transform: translateX(-100%); /* يبدأ من خارج الشاشة من الجهة اليسرى */
}
100% {
transform: translateX(100%); /* ينتهي في الجهة اليمنى خارج الشاشة */
}
}
/* حركة النص عند ظهوره */
@keyframes popIn {
0% {
transform: scale(0); /* يبدأ النص بحجم صفر */
opacity: 0; /* يبدأ النص غير مرئي */
}
50% {
transform: scale(1.2); /* يكبر النص بسرعة */
opacity: 1; /* النص يصبح مرئيا */
}
100% {
transform: scale(1); /* يعود الحجم الطبيعي */
}
}
.my_text.chatbox-pskfo8::before {
border-left-color: #FFD700; /* اللون الذهبي */
}
.chatbox-pskfo8 .username {
color: #FFFFFF;
position: relative;
padding-right: 35px; /* مساحة لوضع الشارة بجانب الاسم */
font-family: 'Cairo', sans-serif; /* تطبيق خط Cairo على الاسم العربي */
font-size: 13px; /* حجم الخط */
animation: moveName 5s linear infinite; /* تحريك الاسم بسرعة */
}
.chatbox-pskfo8 {
background: linear-gradient(to left, #FFD700, #FF8C00); /* خلفية متدرجة باللون الذهبي والبرتقالي */
border-left: 5px solid #000000; /* جعل الحدود ظاهرة */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #FFD700, /* تأثير التوهج الذهبي */
0px 0px 20px 6px #FFFFFF; /* تأثير التوهج الأبيض */
padding: 10px; /* لإعطاء بعض المساحة داخل الصندوق */
width: 100%; /* جعل العرض بنسبة 100% ليتناسب مع المساحة المتاحة */
max-width: 100%; /* تأكد من أن العرض لن يتجاوز المساحة المتاحة */
white-space: normal; /* السماح بتفكيك النص الطويل داخل الصندوق */
word-wrap: break-word; /* الكسر التلقائي للنص عند الحاجة */
overflow: hidden; /* إخفاء أي نص يتجاوز الحدود */
box-sizing: border-box; /* لضمان أن الحشو لا يؤثر على الأبعاد الكلية للصندوق */
}
.chatbox-pskfo8 .username::after {
content: '';
position: absolute;
top: 50%;
right: -30px; /* الموقع بالقرب من الاسم */
transform: translateY(-50%);
width: 24px; /* عرض الشارة */
height: 24px; /* ارتفاع الشارة */
background: url('https://path_to_lion_badge_image.png/') no-repeat center center; /* رابط شارة الأسد */
background-size: cover; /* لضمان تغطية الشارة بكامل المساحة */
}
.chatbox-pskfo8-text {
color: #FFFFFF;
font-family: 'Cairo', sans-serif; /* تطبيق نفس الخط العربي على النص */
animation: popIn 0.5s ease-out; /* إضافة حركة النص */
}
/* تأثيرات النص داخل الحدود */
.chatbox-pskfo8-text-border {
border: 1px solid;
border-color: #856211; /* اللون الذهبي الداكن */
box-shadow: 0px 0px 8px 2px #856211; /* تأثير التوهج على النص */
animation: popIn 0.5s ease-out; /* تطبيق نفس الحركة على النص داخل الحدود */
}
/* حركة اسم المستخدم من اليسار لليمين */
@keyframes moveName {
0% {
transform: translateX(-100%); /* يبدأ من خارج الشاشة من الجهة اليسرى */
}
100% {
transform: translateX(100%); /* ينتهي في الجهة اليمنى خارج الشاشة */
}
}
/* حركة النص عند ظهوره */
@keyframes popIn {
0% {
transform: scale(0); /* يبدأ النص بحجم صفر */
opacity: 0; /* يبدأ النص غير مرئي */
}
50% {
transform: scale(1.2); /* يكبر النص بسرعة */
opacity: 1; /* النص يصبح مرئيا */
}
100% {
transform: scale(1); /* يعود الحجم الطبيعي */
}
}
.chatbox-black24 {
background: linear-gradient(to left, #003366, #000000); /* خلفية متدرجة بألوان الشرطة */
border-left: 5px solid #003366; /* حدود باللون الأزرق */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #003366, /* تأثير توهج باللون الأزرق */
0px 0px 20px 6px #FFFFFF, /* تأثير توهج أبيض */
inset 0 0 10px rgba(255, 255, 255, 0.2), /* تأثير كسر الزجاج داخل الصندوق */
0px 0px 15px rgba(255, 0, 0, 0.6), /* إضافة تأثير هالة حمراء عند الكسر */
0px 0px 30px rgba(0, 0, 0, 0.3); /* تأثير ظل أعمق حول الحواف */
padding: 10px; /* مساحة داخل الصندوق */
width: 100%; /* عرض الصندوق بنسبة 100% */
max-width: 100%; /* التأكد من عدم تجاوز العرض */
white-space: normal; /* السماح بتفكيك النص الطويل */
word-wrap: break-word; /* كسر النص تلقائيًا */
overflow: hidden; /* إخفاء النص الذي يتجاوز الحدود */
box-sizing: border-box; /* ضمان أن الحشو لا يؤثر على الأبعاد */
position: relative;
animation: popIn 0.3s ease-out, breakGlass 2s ease-in-out infinite; /* إضافة تأثير الكسر */
}
.chatbox-black24 .username {
color: #FFFFFF; /* لون النص أبيض */
position: relative;
padding-right: 35px; /* مساحة إضافية بجانب الاسم */
font-family: 'Cairo', sans-serif; /* تطبيق خط Cairo على الاسم العربي */
font-size: 13px; /* حجم الخط */
animation: moveName 4s ease-in-out infinite; /* تسريع حركة الاسم */
}
.chatbox-black24-text {
color: #FFFFFF; /* النص أبيض */
font-family: 'Cairo', sans-serif; /* نفس الخط */
animation: popIn 0.3s ease-out; /* تأثير انبثاق أسرع */
}
.chatbox-black24-text-border {
border: 1px solid;
border-color: #003366; /* نفس اللون الأزرق */
box-shadow: 0px 0px 8px 2px #003366; /* تأثير توهج */
animation: popIn 0.3s ease-out; /* نفس الحركة داخل الحدود */
}
.chatbox-black24 .support-text {
position: absolute;
bottom: 5px; /* وضع النص في الأسفل */
left: 5px; /* وضع النص من الجهة اليسرى */
font-size: 8px; /* حجم الخط صغير جداً */
color: #FFFFFF; /* اللون الأبيض */
font-family: 'Cairo', sans-serif; /* نفس الخط */
opacity: 0.7; /* الشفافية قليلًا */
}
/* حركة اسم المستخدم من اليسار لليمين */
@keyframes moveName {
0% {
transform: translateX(-100%); /* يبدأ من خارج الشاشة من الجهة اليسرى */
}
100% {
transform: translateX(100%); /* ينتهي في الجهة اليمنى */
}
}
/* حركة النص عند ظهوره */
@keyframes popIn {
0% {
transform: scale(0); /* يبدأ النص بحجم صغير */
opacity: 0; /* يبدأ النص غير مرئي */
}
50% {
transform: scale(1.5); /* يكبر النص بسرعة أكبر */
opacity: 1; /* النص يصبح مرئيا */
}
100% {
transform: scale(1); /* يعود الحجم الطبيعي */
}
}
/* تأثير الكسر الزجاجي */
@keyframes breakGlass {
0% {
transform: scale(1); /* الصندوق بحجمه الطبيعي */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #003366,
0px 0px 20px 6px #FFFFFF; /* توهج ثابت */
}
50% {
transform: scale(1.05); /* تكبير الصندوق قليلاً لتأثير الكسر */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4),
inset 0 0 10px rgba(255, 255, 255, 0.5),
0px 0px 15px rgba(255, 0, 0, 0.8), /* تأثير كسر الزجاج مع الهالة الحمراء */
0px 0px 30px rgba(0, 0, 0, 0.5);
}
100% {
transform: scale(1); /* العودة إلى الحجم الطبيعي */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #003366,
0px 0px 20px 6px #FFFFFF;
}
}
.chatbox-black27 {
background: linear-gradient(to left, #FFFFFF, #CCCCCC);
border-left: 5px solid #CCCCCC;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #CCCCCC,
0px 0px 20px 6px #FFFFFF,
inset 0 0 10px rgba(255, 255, 255, 0.2);
padding: 10px;
width: 100%;
max-width: 100%;
word-wrap: break-word;
overflow: hidden;
box-sizing: border-box;
position: relative;
animation: popIn 0.3s ease-out, breakGlass 2s ease-in-out infinite;
}
.chatbox-black27 .username, .chatbox-black27-text, .chatbox-black27 .support-text {
color: #000000;
font-family: 'Cairo', sans-serif;
}
.chatbox-black27 .username {
position: relative;
padding-right: 35px;
font-size: 13px;
animation: moveName 4s ease-in-out infinite;
}
.chatbox-black27-text {
animation: popIn 0.3s ease-out;
}
.chatbox-black27-text-border {
border: 1px solid #CCCCCC;
box-shadow: 0px 0px 8px 2px #CCCCCC;
animation: popIn 0.3s ease-out;
}
.chatbox-black27 .support-text {
position: absolute;
bottom: 5px;
left: 5px;
font-size: 8px;
opacity: 0.7;
}
/* الرسوم المتحركة */
@keyframes moveName {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes popIn {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes breakGlass {
0%, 100% {
transform: scale(1);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #CCCCCC,
0px 0px 20px 6px #FFFFFF;
}
50% {
transform: scale(1.05);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4),
inset 0 0 10px rgba(255, 255, 255, 0.5),
0px 0px 15px rgba(204, 204, 204, 0.8),
0px 0px 30px rgba(0, 0, 0, 0.5);
}
}
@keyframes fireText {
0% {
opacity: 0;
transform: translateY(10px);
text-shadow: 0 0 10px #F62817, 0 0 20px #F62817, 0 0 30px #F62817;
}
100% {
opacity: 1;
transform: translateY(0);
text-shadow: 0 0 5px #F62817, 0 0 15px #F62817, 0 0 25px #F62817;
}
}
@keyframes brokenName {
0% {
letter-spacing: 0;
transform: rotate(0deg);
}
50% {
letter-spacing: 20px; /* زيادة التباعد بين الحروف */
transform: rotate(-5deg); /* دوران طفيف */
}
100% {
letter-spacing: 0;
transform: rotate(0deg);
}
}
.my_text.chatbox-bas08::before {
border-left-color: #F62817;
}
.chatbox-bas08 .username {
color: #FFFFFF;
animation: brokenName 4s ease-in-out forwards; /* زيادة المدة الزمنية */
}
.chatbox-bas08 {
background: linear-gradient(to left, #F62817, #F62817, #000000);
border-left: 0px solid #000000;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
padding: 10px;
}
.chatbox-bas08-text {
color: #FFFFFF;
animation: fireText 1.5s ease-in-out forwards;
}
.chatbox-bas08-text-border {
border: 1px solid;
border-color: #856211;
}
.my_text.chatbox-black81::before {
border-left-color: transparent;
}
.chatbox-black81 .username {
color: #FFFFFF;
}
.chatbox-black81 {
background: linear-gradient(90deg, #F62817, #FF4500, #FFD700, #008000, #0000FF, #4B0082, #EE82EE);
background-size: 400% 400%;
animation: gradient-animation 10s ease infinite;
border-left: 0px solid #000000;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.chatbox-black81-text {
color: #FFFFFF;
}
.chatbox-black81-text-border {
border: 1px solid;
border-color: #856211;
}
/* Animation for gradient background */
@keyframes gradient-animation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* تنسيق عام للصندوق */
.chatbox-bas8033 {
background-color: #333333; /* خلفية رمادية داكنة */
border-left: 6px solid #FFD700; /* شريط ذهبي جانبي */
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3); /* ظل للصندوق */
padding: 12px; /* مسافة داخلية للصندوق */
border-radius: 6px; /* حواف مستديرة */
position: relative; /* للتعامل مع العناصر الإضافية */
color: #FFFFFF; /* لون النص الأبيض */
}
/* تنسيق الاسم */
.chatbox-bas8033 .username {
color: #FFFFFF; /* لون النص أبيض */
font-weight: bold; /* خط غامق */
font-size: 1em; /* حجم مناسب */
text-transform: capitalize; /* أول حرف كبير */
margin-left: 30px; /* مسافة بين الاسم والعناصر الأخرى */
display: inline-block; /* تنسيق بجانب العناصر */
vertical-align: middle; /* محاذاة وسطية */
}
/* السهم على يمين الصندوق */
.chatbox-bas8033::after {
content: '';
position: absolute;
top: 50%; /* محاذاة السهم مع منتصف الصندوق */
right: -10px; /* إزاحة للسهم */
transform: translateY(-50%); /* محاذاة وسطية */
width: 10px; /* عرض السهم */
height: 10px; /* ارتفاع السهم */
background: #333333; /* نفس لون الصندوق */
clip-path: polygon(0 0, 100% 50%, 0 100%); /* شكل السهم */
opacity: 0; /* جعل السهم شفافاً تماماً */
}
/* إزالة الدائرة الصفراء القديمة */
.chatbox-bas8033 .old-circle {
display: none !important;
}
/* إزالة السهم الأسود القديم */
.chatbox-bas8033 .old-arrow {
display: none !important;
}
.my_text.chatbox-b789lk::before {
border-left-color: #000000;
}
.chatbox-b789lk.username {
color: #252521;
}
.chatbox-b789lk {
background: linear-gradient(45deg, #ffffff, #f8f8f8, #e0e0e0);
background-size: 400% 400%;
animation: gradientMove 5s infinite alternate;
border-left: 0px solid #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 10px;
}
.chatbox-b789lk-text {
color: #000000;
font-weight: bold;
}
.chatbox-b789lk-text-border {
border: 2px solid;
border-color: #856211;
padding: 5px;
border-radius: 5px;
transition: border-color 0.5s ease-in-out;
}
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* تأثير تغيير لون الحدود عند التحويم */
.chatbox-b789lk-text-border:hover {
border-color: #ffaa00;
}
/* تغيير لون السهم (المؤشر) إلى أسود */
.my_text.chatbox-black28::before {
border-left-color: #000000; /* أسود */
}
/* لون اسم المستخدم مع تأثير نبض */
.chatbox-black28 .username {
color: #FFFFFF; /* أبيض */
font-weight: bold;
font-size: 14px; /* حجم أصغر للاسم */
animation: pulseName 1.5s infinite alternate ease-in-out; /* تأثير نبض */
}
/* تأثير نبض لاسم المستخدم */
@keyframes pulseName {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}
/* تصميم صندوق الدردشة بلون موحد */
.chatbox-black28 {
background: #111; /* أسود داكن */
border: 1px solid #000000; /* إطار أسود */
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6); /* ظل خفيف */
padding: 10px;
border-radius: 8px;
}
/* لون النص داخل الصندوق مع تأثير خفيف وحجم أصغر */
.chatbox-black28-text {
color: #FFFFFF; /* أبيض */
font-size: 14px; /* حجم أصغر للنص */
font-weight: bold;
animation: glowText 1.5s infinite alternate ease-in-out; /* توهج خفيف */
}
/* تأثير توهج ناعم للنص */
@keyframes glowText {
0% {
text-shadow: 0 0 5px #000000;
}
100% {
text-shadow: 0 0 10px #000000;
}
}
/* تأثير دخول النص مثل انضمام تيك توك لكن بخفة */
@keyframes tiktokJoinEffect {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* تطبيق التأثير عند ظهور أي رسالة */
.chatbox-black28-text {
animation: tiktokJoinEffect 0.4s ease-out, glowText 1.5s infinite alternate ease-in-out;
}
/* تأثير بسيط عند ظهور كلمة "فهمتني" */
.chatbox-black28-text:after {
content: " ";
animation: pulse 0.6s infinite alternate;
}
/* نبض خفيف عند ظهور "فهمتني" */
@keyframes pulse {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}
/* تغيير لون السهم (المؤشر) إلى أبيض */
.my_text.chatbox-white1::before {
border-left-color: #FFFFFF; /* أبيض */
}
/* لون اسم المستخدم */
.chatbox-white1 .username {
color: #000000; /* أسود */
font-weight: bold;
}
/* تصميم صندوق الدردشة بلون أبيض */
.chatbox-white1 {
background: #FFFFFF; /* أبيض */
border: 1px solid #CCCCCC; /* إطار رمادي خفيف */
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); /* ظل خفيف لجمالية التصميم */
padding: 10px;
border-radius: 8px;
}
/* لون النص داخل الصندوق */
.chatbox-white1-text {
color: #000000; /* أسود */
font-size: 16px;
font-weight: bold;
}
/* تأثير خفيف عند ظهور النص */
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(5px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* تطبيق التأثير عند ظهور النص */
.chatbox-white1-text {
animation: fadeIn 0.3s ease-in-out;
}
/* تغيير لون السهم (المؤشر) إلى وردي فاتح */
.my_text.chatbox-pink33::before {
border-left-color: #FFB6C1; /* وردي فاتح */
}
/* لون اسم المستخدم */
.chatbox-pink33 .username {
color: #C71585; /* وردي غامق */
font-weight: bold;
}
/* تصميم صندوق الدردشة بألوان بناتية */
.chatbox-pink33 {
background: #FFC0CB; /* لون وردي فاتح */
border: 1px solid #FF69B4; /* إطار وردي متوسط */
box-shadow: 0px 2px 6px rgba(255, 105, 180, 0.3); /* ظل وردي ناعم */
padding: 10px;
border-radius: 10px;
}
/* لون النص داخل الصندوق */
.chatbox-pink33-text {
color: #800080; /* بنفسجي غامق */
font-size: 16px;
font-weight: bold;
}
/* تأثير ناعم عند ظهور النص */
@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* تطبيق التأثير عند ظهور النص */
.chatbox-pink33-text {
animation: fadeInScale 0.3s ease-in-out;
}
/* تأثير خفيف للنص ليبدو أكثر أنوثة */
@keyframes softGlow {
0% {
text-shadow: 0 0 5px #FF69B4;
}
100% {
text-shadow: 0 0 10px #FF1493;
}
}
/* تطبيق التأثير على النص */
.chatbox-pink33-text {
animation: fadeInScale 0.3s ease-in-out, softGlow 1.5s infinite alternate;
}
/* تغيير لون السهم (المؤشر) إلى نفس لون الصندوق */
.my_text.chatbox-blue9::before {
border-left-color: #0A0F30; /* نفس لون الصندوق */
}
/* لون اسم المستخدم مع تأثير وميض ناعم بلون الصندوق */
.chatbox-blue9 .username {
color: #FFFFFF; /* أبيض */
font-weight: bold;
font-size: 13px; /* حجم أصغر للاسم */
animation: sparkle 1.5s infinite alternate ease-in-out; /* تأثير وميض ناعم */
}
/* تأثير وميض بلون الصندوق */
@keyframes sparkle {
0% { opacity: 1; text-shadow: 0 0 4px #0A0F30; }
100% { opacity: 0.8; text-shadow: 0 0 8px #0A0F30; }
}
/* تصميم صندوق الدردشة بلون أزرق داكن متناسق */
.chatbox-blue9 {
background: #0A0F30; /* أزرق غامق */
border: 1px solid #0A0F30; /* نفس لون الصندوق */
box-shadow: 0px 0px 10px rgba(10, 15, 48, 0.6); /* ظل بنفس اللون */
padding: 10px;
border-radius: 8px;
}
/* لون النص داخل الصندوق مع تأثير لطيف */
.chatbox-blue9-text {
color: #E0F0FF; /* أزرق فاتح */
font-size: 13px; /* تصغير حجم الخط */
font-weight: bold;
animation: waveText 2s infinite alternate ease-in-out; /* تأثير تموج ناعم */
}
/* تأثير تموج ناعم للنص */
@keyframes waveText {
0% { transform: translateY(0px); }
100% { transform: translateY(-2px); }
}
/* تأثير دخول النص بتدرج جميل */
@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.85);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* تطبيق التأثير عند ظهور أي رسالة */
.chatbox-blue9-text {
animation: fadeInScale 0.4s ease-out, waveText 2s infinite alternate ease-in-out;
}
/* تأثير خفقان ناعم عند ظهور كلمة "أحبك" */
.chatbox-blue9-text:after {
content: " ";
animation: heartbeat 0.8s infinite alternate;
}
/* تأثير خفقان ناعم بلون الصندوق */
@keyframes heartbeat {
0% { transform: scale(1); text-shadow: 0 0 4px #0A0F30; }
100% { transform: scale(1.05); text-shadow: 0 0 8px #0A0F30; }
}
/* تأثير خفيف بعد النص لإضفاء لمسة جمالية */
.chatbox-youth-text:after {
content: " ";
animation: bounceEffect 1s infinite;
}
/* تأثير حركة بسيطة (bounce) */
@keyframes bounceEffect {
0% {
transform: translateX(0);
}
50% {
transform: translateX(5px);
}
100% {
transform: translateX(0);
}
}
.my_text.chatbox-silver::before {
border-left-color:#C0C0C0; /* لون فضي */
}
.chatbox-silver .username {
color:#FFFFFF; /* لون متناسق مع لون الصندوق */
animation: shine 8s linear infinite; /* تأثير لمعة بسيطة ومخففة */
font-size: small;
position: relative;
z-index: 1; /* لضمان ظهور الاسم فوق الخلفية */
display: inline-block;
}
.chatbox-silver {
background-color: #C0C0C0; /* لون فضي للصندوق */
border: 2px dashed;
border-color: #FF6347; /* لون ابتدائي للخط المتقطع */
box-shadow: 0px 2px 4px rgba(192, 192, 192, 0.2); /* لون فضي */
position: relative;
z-index: 0; /* لضمان ظهور الصندوق تحت الاسم */
padding: 10px; /* لضمان ظهور المحتوى داخل الصندوق */
animation: borderColorChange 5s linear infinite;
}
.chatbox-silver-text {
color:#FFFFFF; /* لون أبيض للنص */
animation: textEffect 4s ease-in-out infinite, shake 0.5s; /* تأثير ارتجاج عند الظهور */
position: relative;
z-index: 1; /* لضمان ظهور النص فوق الخلفية */
display: inline-block;
}
.chatbox-silver-text-border {
border:1px solid;
border-color:#C0C0C0; /* لون فضي */
}
/* تأثير اللمعة */
@keyframes shine {
0% { background-position: -200px; }
100% { background-position: 200px; }
}
/* تأثير النص */
@keyframes textEffect {
0% { opacity: 0; transform: translateX(-100%); }
50% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(100%); }
}
/* تأثير الارتجاج */
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}
/* تأثير تغيير لون الحدود */
@keyframes borderColorChange {
0% { border-color: #FF6347; } /* لون الطماطم */
25% { border-color: #FFD700; } /* لون ذهبي */
50% { border-color: #ADFF2F; } /* لون أخضر فاتح */
75% { border-color: #00BFFF; } /* لون أزرق سماوي */
100% { border-color: #FF6347; } /* لون الطماطم */
}
.my_text.chatbox-harkk::before {
border-left-color: var(--background-color); /* لون أسود */
}
.chatbox-harkk .username {
color: var(--secondary-color); /* لون برتقالي متناسق */
animation: slowPulse 4s ease-in-out infinite; /* تأثير نبض بطيء */
font-size: small;
position: relative;
z-index: 1; /* لضمان ظهور الاسم فوق الخلفية */
display: inline-block;
}
.chatbox-harkk {
background-color: var(--background-color); /* لون أسود للصندوق */
border: 2px dashed var(--main-color); /* لون أبيض للخط المتقطع */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* لون أسود */
position: relative;
z-index: 0; /* لضمان ظهور الصندوق تحت الاسم */
padding: 10px; /* لضمان ظهور المحتوى داخل الصندوق */
animation: borderColorChange 5s linear infinite;
}
.chatbox-harkk-text {
color: var(--main-color); /* لون أبيض للنص */
animation: glow 4s ease-in-out infinite, shake 0.5s; /* تأثير توهج وارتجاج عند الظهور */
position: relative;
z-index: 1; /* لضمان ظهور النص فوق الخلفية */
display: inline-block;
}
.chatbox-harkk-text-border {
border: 1px solid var(--main-color); /* لون أبيض متناسق */
}
/* تأثير النبض البطيء */
@keyframes slowPulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); } /* تقليل نسبة التكبير */
100% { transform: scale(1); }
}
/* تأثير التوهج */
@keyframes glow {
0% { text-shadow: 0 0 5px var(--main-color); }
50% { text-shadow: 0 0 20px var(--main-color); }
100% { text-shadow: 0 0 5px var(--main-color); }
}
/* تأثير النص */
@keyframes textEffect {
0% { opacity: 0; transform: translateX(-100%); }
50% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(100%); }
}
/* تأثير الارتجاج */
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } /* تقليل مسافة الارتجاج */
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
/* تأثير تغيير لون الحدود */
@keyframes borderColorChange {
0% { border-color: var(--main-color); }
50% { border-color: #DDDDDD; } /* تحسين تأثير التغير */
100% { border-color: var(--main-color); }
}
.my_text.chatbox-hark1::before {
border-left-color:#800000; /* لون خمري */
}
.chatbox-hark1 .username {
color:#FFFFFF; /* اللون الأبيض للنص */
}
.chatbox-hark1 {
background: linear-gradient(to left, #800000, #800000, #000000); /* خلفية متدرجة باللون الخمري */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
animation: border-animation 2s infinite alternate;
}
.chatbox-hark1-text {
color:#FFFFFF; /* اللون الأبيض للنص */
}
.chatbox-hark1-text-border {
border:3px solid; /* سماكة الحواف */
border-color:#856211;
}
@keyframes text-animation {
0% { opacity: 0; transform: translateY(-10px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes border-animation {
0% { border-color: #800000; }
100% { border-color: #F62817; }
}
.chatbox-hark1-text {
animation: text-animation 1s ease-in-out;
}
.chatbox-hark1 {
border: 5px solid #800000; /* لون ابتدائي وسماكة أكبر */
animation: border-animation 2s infinite alternate;
}
.my_text.chatbox-hark2::before {
border-left-color:#D3D3D3; /* لون أبيض غامق قليلاً */
}
.chatbox-hark2 .username {
color:#000000; /* لون أسود واضح */
font-weight: bold; /* جعل النص أكثر وضوحًا */
}
.chatbox-hark2 {
background: linear-gradient(to left, #D3D3D3, #D3D3D3, #FFFFFF); /* خلفية متدرجة باللون الأبيض الغامق قليلاً */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
padding: 10px; /* تعديل الحشوة داخل الصندوق */
max-width: 300px; /* تحديد أقصى عرض للصندوق */
height: auto; /* تعديل ارتفاع الصندوق */
border: 3px solid #D3D3D3; /* لون ابتدائي وسماكة أصغر */
}
.chatbox-hark2-text {
color:#000000; /* لون أسود واضح للنص */
font-weight: bold; /* جعل النص أكثر وضوحًا */
}
.chatbox-hark2-text-border {
border:2px solid; /* تصغير سماكة الحواف */
border-color:#D3D3D3; /* لون أبيض غامق قليلاً */
}
@keyframes text-animation {
0% { opacity: 0; transform: translateY(-5px) rotate(0deg); }
100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
.chatbox-hark2-text {
animation: text-animation 1s ease-in-out;
}
.my_text.chatbox-basck211::before {
border-left-color: #E73879
}
.chatbox-basck211 .username {
color: #FFFFFF;
}
.chatbox-basck211 {
background: linear-gradient(to left, #E73879, #E73879, #FFCFEF);
border-left: 0px solid #FFCFEF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.chatbox-basck211-text {
color: #FFFFFF
}
.chatbox-basck211-text-border {
border: 1px solid;
border-color: #FFCFEF;
}
.my_text.chatbox-bas90::before {
border-left-color: #4A4947
}
.chatbox-bas90 .username {
color: #FFFFFF;
}
.chatbox-bas90 {
background: linear-gradient(to left, #4A4947, #4A4947, #000000);
border-left: 0px solid #000000;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.chatbox-bas90-text {
color: #FFFFFF
}
.chatbox-bas90-text-border {
border: 1px solid;
border-color: #FFFFFF;
}
.my_text.chatbox-basckk::before {
border-left-color: #F62817;
}
.chatbox-basckk .username {
color: #FFFFFF;
}
.chatbox-basckk {
background: linear-gradient(to left, #F62817, #F62817, #000000);
border-left: 0px solid #000000;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #F62817,
/* تأثير التوهج الأØمر */
0px 0px 20px 6px #FFFFFF;
/* تأثير التوهج الأبيض */
}
.chatbox-basckk-text {
color: #FFFFFF;
}
.chatbox-basckk-text-border {
border: 1px solid;
border-color: #856211;
box-shadow: 0px 0px 8px 2px #856211;
/* تأثير التوهج على النص */
}
.my_text.chatbox-bak1::before {
border-left-color: #F62817;
}
.chatbox-bak1 .username {
color: #FFFFFF;
position: relative;
padding-right: 35px;
/* مساØØ© لوضع الشارة بجانب الاسم */
font-family: 'Cairo', sans-serif;
font-size: 13px;
animation: moveName 5s linear infinite, lightningEffect 4s ease 1;
}
.chatbox-bak1 {
background: linear-gradient(to left, #F62817, #F62817, #000000);
border-left: 5px solid #000000;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0px 0px 10px 3px #F62817, 0px 0px 20px 6px #FFFFFF;
padding: 10px;
width: 100%;
max-width: 100%;
white-space: normal;
word-wrap: break-word;
overflow: hidden;
box-sizing: border-box;
}
.chatbox-bak1-text {
color: #FFFFFF;
font-family: 'Cairo', sans-serif;
animation: lightningEffect 1s ease 4;
}
.my_text.chatbox-black90::before {
border-left-color: #F62817;
}
.chatbox-black90 .username {
color: #FFFFFF;
position: relative;
padding-right: 35px;
/* مساØØ© لوضع الشارة بجانب الاسم */
font-family: 'Cairo', sans-serif;
/* تطبيق خط Cairo على الاسم العربي */
font-size: 13px;
/* Øجم الخط */
animation: moveName 5s linear infinite;
/* تØريك الاسم بسرعة */
}
.chatbox-black90 {
background: linear-gradient(to left, #F62817, #F62817, #000000);
/* خلÙية متدرجة بالألوان */
border-left: 5px solid #000000;
/* جعل الØدود ظاهرة */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #F62817,
/* تأثير التوهج الأØمر */
0px 0px 20px 6px #FFFFFF;
/* تأثير التوهج الأبيض */
padding: 10px;
/* لإعطاء بعض المساØØ© داخل الصندوق */
width: 100%;
/* جعل العرض بنسبة 100% ليتناسب مع المساØØ© المتاØØ© */
max-width: 100%;
/* تأكد من أن العرض لن يتجاوز المساØØ© المتاØØ© */
white-space: normal;
/* Ø§Ù„Ø³Ù…Ø§Ø Ø¨ØªÙكيك النص الطويل داخل الصندوق */
word-wrap: break-word;
/* الكسر التلقائي للنص عند الØاجة */
overflow: hidden;
/* إخÙاء أي نص يتجاوز الØدود */
box-sizing: border-box;
/* لضمان أن الØشو لا يؤثر على الأبعاد الكلية للصندوق */
}
.chatbox-black90 .username::after {
content: '';
position: absolute;
top: 50%;
right: -30px;
/* الموقع بالقرب من الاسم */
transform: translateY(-50%);
width: 24px;
/* عرض الشارة */
height: 24px;
/* ارتÙاع الشارة */
background: url('https://path_to_lion_badge_image.png') no-repeat center center;
/* رابط شارة الأسد */
background-size: cover;
/* لضمان تغطية الشارة بكامل المساØØ© */
}
.chatbox-black90-text {
color: #FFFFFF;
font-family: 'Cairo', sans-serif;
/* تطبيق Ù†Ùس الخط العربي على النص */
animation: popIn 0.5s ease-out;
/* إضاÙØ© Øركة النص */
}
/* تأثيرات النص داخل الØدود */
.chatbox-black90-text-border {
border: 1px solid;
border-color: #856211;
box-shadow: 0px 0px 8px 2px #856211;
/* تأثير التوهج على النص */
animation: popIn 0.5s ease-out;
/* تطبيق Ù†Ùس الØركة على النص داخل الØدود */
}
/* Øركة اسم المستخدم من اليسار لليمين */
@keyframes moveName {
0% {
transform: translateX(-100%);
/* يبدأ من خارج الشاشة من الجهة اليسرى */
}
100% {
transform: translateX(100%);
/* ينتهي ÙÙŠ الجهة اليمنى خارج الشاشة */
}
}
/* Øركة النص عند ظهوره */
@keyframes popIn {
0% {
transform: scale(0);
/* يبدأ النص بØجم صÙر */
opacity: 0;
/* يبدأ النص غير مرئي */
}
50% {
transform: scale(1.2);
/* يكبر النص بسرعة */
opacity: 1;
/* النص ÙŠØµØ¨Ø Ù…Ø±Ø¦ÙŠØ§ */
}
100% {
transform: scale(1);
/* يعود الØجم الطبيعي */
}
}
.my_text.chatbox-pskfo8::before {
border-left-color: #FFD700;
/* اللون الذهبي */
}
.chatbox-pskfo8 .username {
color: #FFFFFF;
position: relative;
padding-right: 35px;
/* مساØØ© لوضع الشارة بجانب الاسم */
font-family: 'Cairo', sans-serif;
/* تطبيق خط Cairo على الاسم العربي */
font-size: 13px;
/* Øجم الخط */
animation: moveName 5s linear infinite;
/* تØريك الاسم بسرعة */
}
.chatbox-pskfo8 {
background: linear-gradient(to left, #FFD700, #FF8C00);
/* خلÙية متدرجة باللون الذهبي والبرتقالي */
border-left: 5px solid #000000;
/* جعل الØدود ظاهرة */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #FFD700,
/* تأثير التوهج الذهبي */
0px 0px 20px 6px #FFFFFF;
/* تأثير التوهج الأبيض */
padding: 10px;
/* لإعطاء بعض المساØØ© داخل الصندوق */
width: 100%;
/* جعل العرض بنسبة 100% ليتناسب مع المساØØ© المتاØØ© */
max-width: 100%;
/* تأكد من أن العرض لن يتجاوز المساØØ© المتاØØ© */
white-space: normal;
/* Ø§Ù„Ø³Ù…Ø§Ø Ø¨ØªÙكيك النص الطويل داخل الصندوق */
word-wrap: break-word;
/* الكسر التلقائي للنص عند الØاجة */
overflow: hidden;
/* إخÙاء أي نص يتجاوز الØدود */
box-sizing: border-box;
/* لضمان أن الØشو لا يؤثر على الأبعاد الكلية للصندوق */
}
.chatbox-pskfo8 .username::after {
content: '';
position: absolute;
top: 50%;
right: -30px;
/* الموقع بالقرب من الاسم */
transform: translateY(-50%);
width: 24px;
/* عرض الشارة */
height: 24px;
/* ارتÙاع الشارة */
background: url('https://path_to_lion_badge_image.png') no-repeat center center;
/* رابط شارة الأسد */
background-size: cover;
/* لضمان تغطية الشارة بكامل المساØØ© */
}
.chatbox-pskfo8-text {
color: #FFFFFF;
font-family: 'Cairo', sans-serif;
/* تطبيق Ù†Ùس الخط العربي على النص */
animation: popIn 0.5s ease-out;
/* إضاÙØ© Øركة النص */
}
/* تأثيرات النص داخل الØدود */
.chatbox-pskfo8-text-border {
border: 1px solid;
border-color: #856211;
/* اللون الذهبي الداكن */
box-shadow: 0px 0px 8px 2px #856211;
/* تأثير التوهج على النص */
animation: popIn 0.5s ease-out;
/* تطبيق Ù†Ùس الØركة على النص داخل الØدود */
}
/* Øركة اسم المستخدم من اليسار لليمين */
@keyframes moveName {
0% {
transform: translateX(-100%);
/* يبدأ من خارج الشاشة من الجهة اليسرى */
}
100% {
transform: translateX(100%);
/* ينتهي ÙÙŠ الجهة اليمنى خارج الشاشة */
}
}
/* Øركة النص عند ظهوره */
@keyframes popIn {
0% {
transform: scale(0);
/* يبدأ النص بØجم صÙر */
opacity: 0;
/* يبدأ النص غير مرئي */
}
50% {
transform: scale(1.2);
/* يكبر النص بسرعة */
opacity: 1;
/* النص ÙŠØµØ¨Ø Ù…Ø±Ø¦ÙŠØ§ */
}
100% {
transform: scale(1);
/* يعود الØجم الطبيعي */
}
}
.chatbox-black24 {
background: linear-gradient(to left, #003366, #000000);
/* خلÙية متدرجة بألوان الشرطة */
border-left: 5px solid #003366;
/* Øدود باللون الأزرق */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #003366,
/* تأثير توهج باللون الأزرق */
0px 0px 20px 6px #FFFFFF,
/* تأثير توهج أبيض */
inset 0 0 10px rgba(255, 255, 255, 0.2),
/* تأثير كسر الزجاج داخل الصندوق */
0px 0px 15px rgba(255, 0, 0, 0.6),
/* إضاÙØ© تأثير هالة Øمراء عند الكسر */
0px 0px 30px rgba(0, 0, 0, 0.3);
/* تأثير ظل أعمق Øول الØوا٠*/
padding: 10px;
/* مساØØ© داخل الصندوق */
width: 100%;
/* عرض الصندوق بنسبة 100% */
max-width: 100%;
/* التأكد من عدم تجاوز العرض */
white-space: normal;
/* Ø§Ù„Ø³Ù…Ø§Ø Ø¨ØªÙكيك النص الطويل */
word-wrap: break-word;
/* كسر النص تلقائيًا */
overflow: hidden;
/* إخÙاء النص الذي يتجاوز الØدود */
box-sizing: border-box;
/* ضمان أن الØشو لا يؤثر على الأبعاد */
position: relative;
animation: popIn 0.3s ease-out, breakGlass 2s ease-in-out infinite;
/* إضاÙØ© تأثير الكسر */
}
.chatbox-black24 .username {
color: #FFFFFF;
/* لون النص أبيض */
position: relative;
padding-right: 35px;
/* مساØØ© إضاÙية بجانب الاسم */
font-family: 'Cairo', sans-serif;
/* تطبيق خط Cairo على الاسم العربي */
font-size: 13px;
/* Øجم الخط */
animation: moveName 4s ease-in-out infinite;
/* تسريع Øركة الاسم */
}
.chatbox-black24-text {
color: #FFFFFF;
/* النص أبيض */
font-family: 'Cairo', sans-serif;
/* Ù†Ùس الخط */
animation: popIn 0.3s ease-out;
/* تأثير انبثاق أسرع */
}
.chatbox-black24-text-border {
border: 1px solid;
border-color: #003366;
/* Ù†Ùس اللون الأزرق */
box-shadow: 0px 0px 8px 2px #003366;
/* تأثير توهج */
animation: popIn 0.3s ease-out;
/* Ù†Ùس الØركة داخل الØدود */
}
.chatbox-black24 .support-text {
position: absolute;
bottom: 5px;
/* وضع النص ÙÙŠ الأسÙÙ„ */
left: 5px;
/* وضع النص من الجهة اليسرى */
font-size: 8px;
/* Øجم الخط صغير جداً */
color: #FFFFFF;
/* اللون الأبيض */
font-family: 'Cairo', sans-serif;
/* Ù†Ùس الخط */
opacity: 0.7;
/* الشÙاÙية قليلًا */
}
/* Øركة اسم المستخدم من اليسار لليمين */
@keyframes moveName {
0% {
transform: translateX(-100%);
/* يبدأ من خارج الشاشة من الجهة اليسرى */
}
100% {
transform: translateX(100%);
/* ينتهي ÙÙŠ الجهة اليمنى */
}
}
/* Øركة النص عند ظهوره */
@keyframes popIn {
0% {
transform: scale(0);
/* يبدأ النص بØجم صغير */
opacity: 0;
/* يبدأ النص غير مرئي */
}
50% {
transform: scale(1.5);
/* يكبر النص بسرعة أكبر */
opacity: 1;
/* النص ÙŠØµØ¨Ø Ù…Ø±Ø¦ÙŠØ§ */
}
100% {
transform: scale(1);
/* يعود الØجم الطبيعي */
}
}
/* تأثير الكسر الزجاجي */
@keyframes breakGlass {
0% {
transform: scale(1);
/* الصندوق بØجمه الطبيعي */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #003366,
0px 0px 20px 6px #FFFFFF;
/* توهج ثابت */
}
50% {
transform: scale(1.05);
/* تكبير الصندوق قليلاً لتأثير الكسر */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4),
inset 0 0 10px rgba(255, 255, 255, 0.5),
0px 0px 15px rgba(255, 0, 0, 0.8),
/* تأثير كسر الزجاج مع الهالة الØمراء */
0px 0px 30px rgba(0, 0, 0, 0.5);
}
100% {
transform: scale(1);
/* العودة إلى الØجم الطبيعي */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #003366,
0px 0px 20px 6px #FFFFFF;
}
}
.chatbox-black27 {
background: linear-gradient(to left, #FFFFFF, #CCCCCC);
border-left: 5px solid #CCCCCC;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #CCCCCC,
0px 0px 20px 6px #FFFFFF,
inset 0 0 10px rgba(255, 255, 255, 0.2);
padding: 10px;
width: 100%;
max-width: 100%;
word-wrap: break-word;
overflow: hidden;
box-sizing: border-box;
position: relative;
animation: popIn 0.3s ease-out, breakGlass 2s ease-in-out infinite;
}
.chatbox-black27 .username,
.chatbox-black27-text,
.chatbox-black27 .support-text {
color: #000000;
font-family: 'Cairo', sans-serif;
}
.chatbox-black27 .username {
position: relative;
padding-right: 35px;
font-size: 13px;
animation: moveName 4s ease-in-out infinite;
}
.chatbox-black27-text {
animation: popIn 0.3s ease-out;
}
.chatbox-black27-text-border {
border: 1px solid #CCCCCC;
box-shadow: 0px 0px 8px 2px #CCCCCC;
animation: popIn 0.3s ease-out;
}
.chatbox-black27 .support-text {
position: absolute;
bottom: 5px;
left: 5px;
font-size: 8px;
opacity: 0.7;
}
/* الرسوم المتØركة */
@keyframes moveName {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes popIn {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes breakGlass {
0%,
100% {
transform: scale(1);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
0px 0px 10px 3px #CCCCCC,
0px 0px 20px 6px #FFFFFF;
}
50% {
transform: scale(1.05);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4),
inset 0 0 10px rgba(255, 255, 255, 0.5),
0px 0px 15px rgba(204, 204, 204, 0.8),
0px 0px 30px rgba(0, 0, 0, 0.5);
}
}
@keyframes fireText {
0% {
opacity: 0;
transform: translateY(10px);
text-shadow: 0 0 10px #F62817, 0 0 20px #F62817, 0 0 30px #F62817;
}
100% {
opacity: 1;
transform: translateY(0);
text-shadow: 0 0 5px #F62817, 0 0 15px #F62817, 0 0 25px #F62817;
}
}
@keyframes brokenName {
0% {
letter-spacing: 0;
transform: rotate(0deg);
}
50% {
letter-spacing: 20px;
/* زيادة التباعد بين الØرو٠*/
transform: rotate(-5deg);
/* دوران Ø·ÙÙŠÙ */
}
100% {
letter-spacing: 0;
transform: rotate(0deg);
}
}
.my_text.chatbox-bas08::before {
border-left-color: #F62817;
}
.chatbox-bas08 .username {
color: #FFFFFF;
animation: brokenName 4s ease-in-out forwards;
/* زيادة المدة الزمنية */
}
.chatbox-bas08 {
background: linear-gradient(to left, #F62817, #F62817, #000000);
border-left: 0px solid #000000;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
padding: 10px;
}
.chatbox-bas08-text {
color: #FFFFFF;
animation: fireText 1.5s ease-in-out forwards;
}
.chatbox-bas08-text-border {
border: 1px solid;
border-color: #856211;
}
.my_text.chatbox-black81::before {
border-left-color: transparent;
}
.chatbox-black81 .username {
color: #FFFFFF;
}
.chatbox-black81 {
background: linear-gradient(90deg, #F62817, #FF4500, #FFD700, #008000, #0000FF, #4B0082, #EE82EE);
background-size: 400% 400%;
animation: gradient-animation 10s ease infinite;
border-left: 0px solid #000000;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.chatbox-black81-text {
color: #FFFFFF;
}
.chatbox-black81-text-border {
border: 1px solid;
border-color: #856211;
}
/* Animation for gradient background */
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* تنسيق عام للصندوق */
.chatbox-bas8033 {
background-color: #333333;
/* خلÙية رمادية داكنة */
border-left: 6px solid #FFD700;
/* شريط ذهبي جانبي */
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
/* ظل للصندوق */
padding: 12px;
/* مساÙØ© داخلية للصندوق */
border-radius: 6px;
/* Øوا٠مستديرة */
position: relative;
/* للتعامل مع العناصر الإضاÙية */
color: #FFFFFF;
/* لون النص الأبيض */
}
/* تنسيق الاسم */
.chatbox-bas8033 .username {
color: #FFFFFF;
/* لون النص أبيض */
font-weight: bold;
/* خط غامق */
font-size: 1em;
/* Øجم مناسب */
text-transform: capitalize;
/* أول Øر٠كبير */
margin-left: 30px;
/* مساÙØ© بين الاسم والعناصر الأخرى */
display: inline-block;
/* تنسيق بجانب العناصر */
vertical-align: middle;
/* Ù…Øاذاة وسطية */
}
/* السهم على يمين الصندوق */
.chatbox-bas8033::after {
content: '';
position: absolute;
top: 50%;
/* Ù…Øاذاة السهم مع منتص٠الصندوق */
right: -10px;
/* إزاØØ© للسهم */
transform: translateY(-50%);
/* Ù…Øاذاة وسطية */
width: 10px;
/* عرض السهم */
height: 10px;
/* ارتÙاع السهم */
background: #333333;
/* Ù†Ùس لون الصندوق */
clip-path: polygon(0 0, 100% 50%, 0 100%);
/* شكل السهم */
opacity: 0;
/* جعل السهم Ø´ÙاÙاً تماماً */
}
/* إزالة الدائرة الصÙراء القديمة */
.chatbox-bas8033 .old-circle {
display: none !important;
}
/* إزالة السهم الأسود القديم */
.chatbox-bas8033 .old-arrow {
display: none !important;
}
/* تنسيق النص داخل الصندوق */
.chatbox-bas8033 .message {
color: #FFFFFF;
/* لون النص أبيض */
font-size: 0.9em;
/* Øجم النص مناسب */
line-height: 1.4;
/* تباعد الأسطر */
}
.chatbox-b789lk {
background: linear-gradient(45deg, #ffffff, #f8f8f8, #e0e0e0);
background-size: 400% 400%;
animation: gradientMove 5s infinite alternate;
border-left: 0px solid #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 10px;
}
.chatbox-b789lk-text {
color: #000000;
font-weight: bold;
}
.chatbox-b789lk-text-border {
border: 2px solid;
border-color: #856211;
padding: 5px;
border-radius: 5px;
transition: border-color 0.5s ease-in-out;
}
@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* تأثير تغيير لون الØدود عند التØويم */
.chatbox-b789lk-text-border:hover {
border-color: #ffaa00;
}
.my_text.chatbox-bas08::before {
border-left-color: #FFFFFF;
/* لون الØد أبيض */
}
.chatbox-bas08 .username {
color: #000000;
/* لون اسم المستخدم أسود */
}
.chatbox-bas08 {
background: #FFFFFF;
/* خلÙية بيضاء */
border-left: 0px solid #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
padding: 10px;
}
.chatbox-bas08-text {
color: #000000;
/* لون النص أسود */
text-shadow: none;
/* إزالة أي تأثير ظل */
}
.chatbox-bas08-text-border {
border: 1px solid;
border-color: #856211;
}
.my_text.chatbox-blackk::before {
border-left-color: #FFFFFF;
/* تغيير اللون إلى الأبيض */
}
.chatbox-blackk .username {
color: #000000;
/* تغيير لون اسم المستخدم إلى الأسود */
}
.chatbox-blackk {
background: linear-gradient(to left, #FFFFFF, #FFFFFF, #FFFFFF);
/* خلÙية بيضاء بالكامل */
border-left: 0px solid #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.chatbox-blackk-text {
color: #000000;
/* تغيير لون النص إلى الأسود */
}
.chatbox-blackk-text-border {
border: 1px solid;
border-color: #856211;
}
/* تغيير لون السهم (المؤشر) إلى ذهبي */
.my_text.chatbox-black28::before {
border-left-color: #FFD700;
/* ذهبي */
}
/* لون اسم المستخدم */
.chatbox-black28 .username {
color: #FFFFFF;
/* أبيض */
font-weight: normal;
/* تخÙي٠سماكة الخط */
font-size: 14px;
/* تصغير Øجم الخط */
}
/* تصميم صندوق الدردشة بلون موØد */
.chatbox-black28 {
background: #111;
/* أسود داكن */
border: 1px solid #FFD700;
/* إطار ذهبي Ø®ÙÙŠÙ */
box-shadow: 0px 0px 5px rgba(255, 215, 0, 0.5);
/* تقليل الظل */
padding: 8px;
/* تقليل المساÙات الداخلية */
border-radius: 6px;
/* تقليل انØناء الزوايا */
}
/* لون النص داخل الصندوق مع تأثير Ø®ÙÙŠÙ */
.chatbox-black28-text {
color: #FFFFFF;
/* أبيض */
font-size: 14px;
/* Øجم أصغر للنص */
font-weight: normal;
/* تخÙي٠سماكة الخط */
animation: glowText 2s infinite alternate ease-in-out;
/* جعل التوهج أبطأ وخÙÙŠÙ */
}
/* تأثير توهج Ø®Ùي٠جدًا للنص */
@keyframes glowText {
0% {
text-shadow: 0 0 3px #FFD700;
}
100% {
text-shadow: 0 0 6px #FFD700;
}
}
/* تأثير دخول سلس بدون تأثير على الأداء */
@keyframes tiktokJoinEffect {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* تطبيق التأثير عند ظهور أي رسالة */
.chatbox-black28-text {
animation: tiktokJoinEffect 0.3s ease-out, glowText 2s infinite alternate ease-in-out;
}
/* تأثير بسيط عند ظهور كلمة "Ùهمتني" */
.chatbox-black28-text:after {
content: " ✨";
animation: pulse 0.8s infinite alternate;
}
/* نبض Ø®Ùي٠جدًا عند ظهور "Ùهمتني" */
@keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(1.05);
}
}
.my_text.chatbox-hark1::before {
border-left-color: #800000;
/* لون خمري */
}
.chatbox-hark1 .username {
color: #FFFFFF;
/* اللون الأبيض للنص */
}
.chatbox-hark1 {
background: linear-gradient(to left, #800000, #800000, #000000);
/* خلÙية متدرجة باللون الخمري */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
animation: border-animation 2s infinite alternate;
}
.chatbox-hark1-text {
color: #FFFFFF;
/* اللون الأبيض للنص */
}
.chatbox-hark1-text-border {
border: 3px solid;
/* سماكة الØوا٠*/
border-color: #856211;
}
@keyframes text-animation {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes border-animation {
0% {
border-color: #800000;
}
100% {
border-color: #F62817;
}
}
.chatbox-hark1-text {
animation: text-animation 1s ease-in-out;
}
.chatbox-hark1 {
border: 5px solid #800000;
/* لون ابتدائي وسماكة أكبر */
animation: border-animation 2s infinite alternate;
}
.my_text.chatbox-hark2::before {
border-left-color: #D3D3D3;
/* لون أبيض غامق قليلاً */
}
.chatbox-hark2 .username {
color: #000000;
/* لون أسود ÙˆØ§Ø¶Ø */
font-weight: bold;
/* جعل النص أكثر وضوØًا */
}
.chatbox-hark2 {
background: linear-gradient(to left, #D3D3D3, #D3D3D3, #FFFFFF);
/* خلÙية متدرجة باللون الأبيض الغامق قليلاً */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
padding: 10px;
/* تعديل الØشوة داخل الصندوق */
max-width: 300px;
/* تØديد أقصى عرض للصندوق */
height: auto;
/* تعديل ارتÙاع الصندوق */
border: 3px solid #D3D3D3;
/* لون ابتدائي وسماكة أصغر */
}
.chatbox-hark2-text {
color: #000000;
/* لون أسود ÙˆØ§Ø¶Ø Ù„Ù„Ù†Øµ */
font-weight: bold;
/* جعل النص أكثر وضوØًا */
}
.chatbox-hark2-text-border {
border: 2px solid;
/* تصغير سماكة الØوا٠*/
border-color: #D3D3D3;
/* لون أبيض غامق قليلاً */
}
@keyframes text-animation {
0% {
opacity: 0;
transform: translateY(-5px) rotate(0deg);
}
100% {
opacity: 1;
transform: translateY(0) rotate(0deg);
}
}
.chatbox-hark2-text {
animation: text-animation 1s ease-in-out;
}
.my_text.chatbox-silver::before {
border-left-color: #C0C0C0;
/* لون Ùضي */
}
.chatbox-silver .username {
color: #FFFFFF;
/* لون متناسق مع لون الصندوق */
animation: shine 8s linear infinite;
/* تأثير لمعة بسيطة ومخÙÙØ© */
font-size: small;
position: relative;
z-index: 1;
/* لضمان ظهور الاسم Ùوق الخلÙية */
display: inline-block;
}
.chatbox-silver {
background-color: #C0C0C0;
/* لون Ùضي للصندوق */
border: 2px dashed;
border-color: #FF6347;
/* لون ابتدائي للخط المتقطع */
box-shadow: 0px 2px 4px rgba(192, 192, 192, 0.2);
/* لون Ùضي */
position: relative;
z-index: 0;
/* لضمان ظهور الصندوق تØت الاسم */
padding: 10px;
/* لضمان ظهور المØتوى داخل الصندوق */
animation: borderColorChange 5s linear infinite;
}
.chatbox-silver-text {
color: #FFFFFF;
/* لون أبيض للنص */
animation: textEffect 4s ease-in-out infinite, shake 0.5s;
/* تأثير ارتجاج عند الظهور */
position: relative;
z-index: 1;
/* لضمان ظهور النص Ùوق الخلÙية */
display: inline-block;
}
.chatbox-silver-text-border {
border: 1px solid;
border-color: #C0C0C0;
/* لون Ùضي */
}
/* تأثير اللمعة */
@keyframes shine {
0% {
background-position: -200px;
}
100% {
background-position: 200px;
}
}
/* تأثير النص */
@keyframes textEffect {
0% {
opacity: 0;
transform: translateX(-100%);
}
50% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(100%);
}
}
/* تأثير الارتجاج */
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
transform: translateX(10px);
}
}
/* تأثير تغيير لون الØدود */
@keyframes borderColorChange {
0% {
border-color: #FF6347;
}
/* لون الطماطم */
25% {
border-color: #FFD700;
}
/* لون ذهبي */
50% {
border-color: #ADFF2F;
}
/* لون أخضر ÙØ§ØªØ */
75% {
border-color: #00BFFF;
}
/* لون أزرق سماوي */
100% {
border-color: #FF6347;
}
/* لون الطماطم */
}
.my_text.chatbox-harkk::before {
border-left-color: var(--background-color);
/* لون أسود */
}
.chatbox-harkk .username {
color: var(--secondary-color);
/* لون برتقالي متناسق */
animation: slowPulse 4s ease-in-out infinite;
/* تأثير نبض بطيء */
font-size: small;
position: relative;
z-index: 1;
/* لضمان ظهور الاسم Ùوق الخلÙية */
display: inline-block;
}
.chatbox-harkk {
background-color: var(--background-color);
/* لون أسود للصندوق */
border: 2px dashed var(--main-color);
/* لون أبيض للخط المتقطع */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
/* لون أسود */
position: relative;
z-index: 0;
/* لضمان ظهور الصندوق تØت الاسم */
padding: 10px;
/* لضمان ظهور المØتوى داخل الصندوق */
animation: borderColorChange 5s linear infinite;
}
.chatbox-harkk-text {
color: var(--main-color);
/* لون أبيض للنص */
animation: glow 4s ease-in-out infinite, shake 0.5s;
/* تأثير توهج وارتجاج عند الظهور */
position: relative;
z-index: 1;
/* لضمان ظهور النص Ùوق الخلÙية */
display: inline-block;
}
.chatbox-harkk-text-border {
border: 1px solid var(--main-color);
/* لون أبيض متناسق */
}
/* تأثير النبض البطيء */
@keyframes slowPulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
/* تقليل نسبة التكبير */
100% {
transform: scale(1);
}
}
/* تأثير التوهج */
@keyframes glow {
0% {
text-shadow: 0 0 5px var(--main-color);
}
50% {
text-shadow: 0 0 20px var(--main-color);
}
100% {
text-shadow: 0 0 5px var(--main-color);
}
}
/* تأثير النص */
@keyframes textEffect {
0% {
opacity: 0;
transform: translateX(-100%);
}
50% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(100%);
}
}
/* تأثير الارتجاج */
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
transform: translateX(-5px);
}
/* تقليل مساÙØ© الارتجاج */
20%,
40%,
60%,
80% {
transform: translateX(5px);
}
}
/* تأثير تغيير لون الØدود */
@keyframes borderColorChange {
0% {
border-color: var(--main-color);
}
50% {
border-color: #DDDDDD;
}
/* تØسين تأثير التغير */
100% {
border-color: var(--main-color);
}
}
/* تغيير لون السهم (المؤشر) إلى Ù†Ùس لون الصندوق */
.my_text.chatbox-blue9::before {
border-left-color: #0A0F30;
/* Ù†Ùس لون الصندوق */
}
/* لون اسم المستخدم مع تأثير وميض ناعم بلون الصندوق */
.chatbox-blue9 .username {
color: #FFFFFF;
/* أبيض */
font-weight: bold;
font-size: 13px;
/* Øجم أصغر للاسم */
animation: sparkle 1.5s infinite alternate ease-in-out;
/* تأثير وميض ناعم */
}
/* تأثير وميض بلون الصندوق */
@keyframes sparkle {
0% {
opacity: 1;
text-shadow: 0 0 4px #0A0F30;
}
100% {
opacity: 0.8;
text-shadow: 0 0 8px #0A0F30;
}
}
/* تصميم صندوق الدردشة بلون أزرق داكن متناسق */
.chatbox-blue9 {
background: #0A0F30;
/* أزرق غامق */
border: 1px solid #0A0F30;
/* Ù†Ùس لون الصندوق */
box-shadow: 0px 0px 10px rgba(10, 15, 48, 0.6);
/* ظل بنÙس اللون */
padding: 10px;
border-radius: 8px;
}
/* لون النص داخل الصندوق مع تأثير لطي٠*/
.chatbox-blue9-text {
color: #E0F0FF;
/* أزرق ÙØ§ØªØ */
font-size: 13px;
/* تصغير Øجم الخط */
font-weight: bold;
animation: waveText 2s infinite alternate ease-in-out;
/* تأثير تموج ناعم */
}
/* تأثير تموج ناعم للنص */
@keyframes waveText {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-2px);
}
}
/* تأثير دخول النص بتدرج جميل */
@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.85);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* تطبيق التأثير عند ظهور أي رسالة */
.chatbox-blue9-text {
animation: fadeInScale 0.4s ease-out, waveText 2s infinite alternate ease-in-out;
}
/* تأثير Ø®Ùقان ناعم عند ظهور كلمة "Ø£Øبك" */
.chatbox-blue9-text:after {
content: " ";
animation: heartbeat 0.8s infinite alternate;
}
/* تأثير Ø®Ùقان ناعم بلون الصندوق */
@keyframes heartbeat {
0% {
transform: scale(1);
text-shadow: 0 0 4px #0A0F30;
}
100% {
transform: scale(1.05);
text-shadow: 0 0 8px #0A0F30;
}
}
/* تأثير Ø®Ùي٠بعد النص لإضÙاء لمسة جمالية */
.chatbox-youth-text:after {
content: " ";
animation: bounceEffect 1s infinite;
}
/* تأثير Øركة بسيطة (bounce) */
@keyframes bounceEffect {
0% {
transform: translateX(0);
}
50% {
transform: translateX(5px);
}
100% {
transform: translateX(0);
}
}
/* تحسين الهيكلة والتباعد */
#main_input_icons {
position: relative;
width: 100%;
height: 18px; /* تقليل الارتفاع */
}
/* تنسيق قائمة الأيقونات */
.minput_icon_list {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
overflow-x: auto;
gap: 4px; /* تقليل الفجوات بشكل أكبر */
padding: 0 2px; /* تقليل الحشوة */
}
/* تنسيق الأيقونات */
.minput_icon {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
min-width: 32px; /* تقليل العرض */
height: 28px; /* تقليل الارتفاع */
padding: 0 6px; /* تقليل الحشوة الجانبية */
font-size: 15px; /* حجم أصغر للنص */
cursor: pointer;
transition: all 0.2s ease-in-out;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
position: relative;
}
/* تأثير عند تمرير الفأرة */
.minput_icon:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.04);
}
/* ضبط حجم الاسم وإبعاده عن الأيقونة */
.minput_title {
font-size: 10px;
opacity: 0.75;
position: absolute;
bottom: -14px;
white-space: nowrap;
}
/* تحسين مظهر التمرير */
.minput_icon_list::-webkit-scrollbar {
height: 3px;
}
.minput_icon_list::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
/* تحسين توافق التصميم للشاشات الصغيرة */
@media (max-width: 768px) {
.minput_icon {
font-size: 14px;
padding: 0 5px;
min-width: 30px;
height: 26px;
}
.minput_title {
font-size: 9px;
bottom: -13px;
}
}
.green_ico {
color: #4CC9F0 !important; /* أخضر فاقع */
}
.pink_ico {
color: #FF3997 !important;
}
.user_stage_chat {color: #ffffff;top: -7px;left: -8px;font-size: 8px;font-weight: 500;border-radius: 10px;text-align: center;position: absolute;z-index: 1;padding: 2px 4px;box-shadow: #7575754d 2px 0px 0px 0;}
/*.under-10 {*/
/* background: #03add8;*/
/*}*/
/*.under-20 {*/
/* background: #0327d8;*/
/*}*/
/*.under-40 {*/
/* background: #d803c8;*/
/*}*/
/*.under-50 {*/
/* background: #d8035b;*/
/*}*/
/*.under-60 {*/
/* background: #03d8b1;*/
/*}*/
/*.under-70 {*/
/* background: #129810;*/
/*}*/
/*.under-80 {*/
/* background: #981010;*/
/*}*/
/*.under-90 {*/
/* background: #9a603e;*/
/*}*/
/*.under-100 {*/
/* background: #949019;*/
/*}*/
/*.reach-100 {*/
/* background: #d67701;*/
/*}*/
.under-3 { background: #03add8; }
.under-6 { background: #0327d8; }
.under-9 { background: #d803c8; }
.under-12 { background: #d8035b; }
.under-15 { background: #03d8b1; }
.under-18 { background: #129810; }
.under-21 { background: #981010; }
.under-24 { background: #9a603e; }
.under-27 { background: #949019; }
.under-30 { background: #d67701; }
.under-33 { background: #6a0dad; }
.under-36 { background: #20b2aa; }
.under-39 { background: #ff6347; }
.under-42 { background: #4682b4; }
.under-45 { background: #32cd32; }
.under-48 { background: #ff4500; }
.under-51 { background: #daa520; }
.under-54 { background: #8b008b; }
.under-57 { background: #5f9ea0; }
.under-60 { background: #dc143c; }
.under-63 { background: #00008b; }
.under-66 { background: #b8860b; }
.under-69 { background: #008000; }
.under-72 { background: #9932cc; }
.under-75 { background: #8b0000; }
.under-78 { background: #ff8c00; }
.under-81 { background: #2e8b57; }
.under-84 { background: #9400d3; }
.under-87 { background: #ff1493; }
.under-90 { background: #00ced1; }
.under-93 { background: #ff69b4; }
.under-96 { background: #1e90ff; }
.under-99 { background: #90ee90; }
.under-102 { background: #ffb6c1; }
.reach-max { background: #000000; }