/* Bubbles (بدون أسهم) */

.msg{display:flex;align-items:flex-end;gap:6px;margin:6px 0}

.msg.other{justify-content:flex-start}

.msg.me{justify-content:flex-end}

.bubble{

  max-width:75%;padding:8px 10px;border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.06);

  background:#f5f5f7;color:#222;word-wrap:break-word;overflow-wrap:break-word

}

.msg.me .bubble{background:#e9f4ff;color:#111}



.meta{display:flex;align-items:center;gap:8px;font-size:11px;color:#888;margin-top:4px}

.msg.me .meta{justify-content:flex-end}



/* Read receipts */

.read-state{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}

.read-state .tick{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:12px;line-height:1}

.state-unread .tick{color:#9e9e9e}     /* ✓ واحدة رمادي */

.state-sent   .tick{color:#9e9e9e}     /* ✓✓ رمادي */

.state-seen   .tick{color:#1e88e5}     /* ✓✓ أزرق */



/* لإظهار … في نهاية الأسطر عندما يلزم */

.text-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;direction:ltr;text-align:start}

/* 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: sans-serif,'trebuchet ms','lucida grande','lucida sans unicode',arial,helvetica,sans-serif; }

* { scrollbar-width: thin; /* Firefox */ scrollbar-color: rgba(136,136,136,.3) transparent; /* Firefox */ }

*::-webkit-scrollbar { width: 5px; height: 5px; background: transparent; }

*::-webkit-scrollbar-track { background: transparent !important; box-shadow: none; }

*::-webkit-scrollbar-thumb { background-color: rgba(136, 136, 136, 0.5); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }



/* 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; width:auto; display:block; }

.sub_list_icon img  { height:30px; width:30px; display:block; border-radius:50%; }

.sub_list_sicon img  { height:20px; width:20px; display:block; border-radius:50%; }

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



/* sub menu category */

.sub_cat_item { width:calc((100% / 3) - 10px); height:80px; margin:5px; display:grid; align-items:center; float:left; position:relative; border-radius:10px; padding:5px;  cursor:pointer; }

.sub_cat_img { width:50px; max-height:50px; border-radius:10px; margin:0 auto; }

.sub_cat_title { font-size:13px; text-align:center; }





.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 (base + fixes)

   ========================= */



/* Root row (kept as table layout) */

.user_item {

  position: relative;

  display: table;

  table-layout: fixed;          /* Prevent text from stretching columns */

  width: 100%;

  cursor: pointer;

  padding: 5px 10px;

  border-radius: 5px;

}



/* Avatar cell */

.user_item_avatar {

  display: table-cell;

  vertical-align: middle;

  width: 36px;                  /* Reserve space; image is smaller inside */

  position: relative;

}



/* Default avatar (no frame) — smaller size */

.user_item_avatar .acav,

.ul-avatar .acav {

  width: 28px !important;

  height: 28px !important;

  display: block;

  cursor: pointer;

  border-radius: 8px;           /* Soft square by default */

  object-fit: cover;

  margin: 0 auto;               /* Center inside the 36px cell */

}



/* With frame: avatar becomes circular and slightly smaller to fit frame */

.user_item_avatar.has-frame .acav,

.ul-avatar.has-frame .acav,

.ul-avatar-fix.has-frame .acav {

  width: 26px !important;

  height: 26px !important;

  border-radius: 50% !important;

  object-fit: cover !important;

  margin: 2px auto !important;  /* Balanced inside frame ring */

}



/* Optional: frame size to match smaller avatar */

.user_item_avatar.has-frame .frame,

.ul-avatar.has-frame .frame,

.ul-avatar-fix.has-frame .frame {

  width: 32px !important;

  height: 32px !important;

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  pointer-events: none;

}



/* Text cells (take remaining width and allow ellipsis) */

.user_item_data,

.user_item_name {

  display: table-cell;

  vertical-align: middle;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  padding: 0 8px;

  width: 100%;                  /* Capture remaining space */

}



/* Fixed-width icon cells */

.user_item_icon,

.user_item_option,

.user_item_div,

.user_item_flag {

  display: table-cell;

  vertical-align: middle;

  text-align: center;

  white-space: nowrap;

}



.user_item_icon  { width: 24px; font-size: 15px; }

.user_item_option{ width: 40px; font-size: 20px; }

.user_item_div   { width: 60px; font-size: 20px; }

.user_item_flag  { width: 24px; }

.user_item_flag img {

  width: 20px; height: auto; display: inline-block; margin: 0 auto; border-radius: 2px;

}



/* Online status dot */

.list_status {

  position: absolute; left: 0; bottom: -2px;

  width: 14px; height: 14px;

  border-radius: 50%;

  background: #fff; padding: 1px;

}



/* Mood — truncate at the END with ellipsis (…) */

.list_mood,

.ul-status,

.txt-ellipsis,

.mood-ellipsis {

  font-size: 11px;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: nowrap !important;

  display: block;

  direction: ltr !important;    /* Forces end-ellipsis even for RTL text */

  text-align: start !important;

}



/* Extra icons */

.list_flag  { height: 13px; width: auto; border-radius: 2px; }

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

.list_mute,

.list_mob,

.list_ghost { height: 15px; width: auto; }



/* =========================

   Support for ul-* structure (from PHP)

   ========================= */



/* Force row to flex so ellipsis is reliable in this layout too */

.ul-fix { display: flex; align-items: center; gap: 8px; }

.ul-info-fix { flex: 1 1 auto; min-width: 0; }

.icons-fixed { flex: 0 0 auto; }



.ul-sex .sex-ic {

  width: 18px; height: 18px;

  display: inline-block; vertical-align: middle; opacity: .95;

}



/* Avatar circular when a frame exists (ul-* variants) */

.ul-avatar.has-frame .acav,

.ul-avatar-fix.has-frame .acav { border-radius: 50% !important; }



/* 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:10px; 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; padding:5px 10px; border-radius:10px; }



/* 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, .fa-regular, .fa-solid, .fa-brands, .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:10px; 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_arrow { width:20px; text-align:center; display:table-cell; vertical-align:middle; font-size:14px; }

.fmenu_icon { width:30px; text-align:center; display:table-cell; vertical-align:middle; font-size:16px; }

.fmenu_icon img { width:20px; height:20px; margin:0 auto; display:block; border-radius:50%; }

.fmenu_gimg, .fmenu_timg, .fmenu_aimg, .fmenu_himg, .fmenu_img, .fmenu_simg { width:40px; text-align:center; display:table-cell; vertical-align:middle; }

.fmenu_gimg img, .fmenu_timg img, .fmenu_aimg img, .fmenu_himg img, .fmenu_img img, .fmenu_simg img { width:30px; height:30px; margin:0 auto; display:block; border-radius:5px; }

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

.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; padding:0 10px; }

.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:10px; 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; }

#leaderboard_menu, #game_menu, #tool_menu, #app_menu, #store_menu, #help_menu { position:absolute; left:50px; top:50px; z-index:202; display:none; text-align:initial; }

#chat_main_menu, #status_menu, #report_menu, #notification_menu, #bank_menu, #room_options_menu, #setting_menu, 

#friends_menu, #private_menu { position:absolute; right:0; z-index:202; top:50px; display:none; text-align:initial; }



/* menus width */

#private_opt { width:200px; }

#page_main_menu { width:300px; }

#chat_main_menu { width:300px; }

#setting_menu { width:300px; }

#status_menu { width:300px; }

#bank_menu { width:300px; }

#leaderboard_menu { width:300px; }

#tool_menu { width:300px; }

#help_menu { width:300px; }

#game_menu { width:300px; }

#app_menu { width:300px; }

#store_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:absolute; bottom:0; left:-5000px; z-index:99; border-radius:20px; 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:15px; 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; }

#chat_right_bottom { width:100%; height:60px; }

#chat_right_bottom img { width:100%; height:100%; object-fit: cover; object-position: center; }



/* 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 10px; }

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

.hunt_quote { float:right; }

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

.outpriv .prdate { text-align:right; }

.outpriv .ppitem { float:right; }

.outpriv .privopt { text-align:right; }



/* element css */

.nogranted { display:none !important }



/* chat logs css */

.ch_logs, .other_logs {

    border: 1px solid #ededed;

    border-radius: 6px;

    margin-bottom: 7px;

    padding: 7px 16px;

    display: flex;

    align-items: center;

    min-height: 20px;

    position: relative;

    word-wrap: break-word;

    width: 100%;

    max-width: 100%;

    overflow: hidden;

    cursor: pointer;

    table-layout: fixed;

}



/* ✅ تناوب الألوان بين الرسائل */

.ch_logs:nth-child(odd),

.other_logs:nth-child(odd) {

    background: #fffde8 !important; /* الأصفر الفاتح */

}



.ch_logs:nth-child(even),

.other_logs:nth-child(even) {

    background: #f9f9f9 !important; /* أبيض غامق (رمادي فاتح جدًا) */

}

/* صورة المستخدم */

.chat_avatar, .topic_icon {

    display: flex !important;

    align-items: center;

    justify-content: center;

    margin-right: 5px;          /* تقارب بسيط بين الصورة والنص */

    width: 28px !important;     /* عرض الصورة */

    height: 28px !important;    /* ارتفاع الصورة */

    vertical-align: middle;

    position: relative;

    flex-shrink: 0;

}



/* داخل الصورة */

.cavatar, .tpicon {

    width: 28px !important;

    height: 28px !important;

    border-radius: 6px !important;   /* حواف ناعمة */

    object-fit: cover;               /* قص الصورة لتناسب الإطار */

    border: 2px solid #fff;          /* حافة بيضاء بسيطة */

    display: block;

    overflow: hidden;

    cursor: pointer;

}



.my_text, .topic_text {

    display: flex;

    flex-direction: column;

    flex: 1 1 auto;

    padding: 0 0 0 7px;

    position: relative;

    justify-content: center;

    vertical-align: top;

}


.my_text .username {
  white-space: nowrap;          /* لا ينطوي الاسم */
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.6;             /* يفتح المسافة العمودية */
  font-size: 12px;
  position: relative;
  top: 1px;                     /* يرفع الاسم قليلاً لتظهر النقاط السفلية */
} 

.chat_rank {

    display: inline-block;

    font-size: 16px !important;

    margin-right: 7px;

    vertical-align: middle;

    width: auto;

    height: 16px;

}



.bubble {

    display: inline-block;          /* حتى تلتزم بمحاذاة واحدة */

    font-size: 20px;

    color: #303030;

    word-break: break-word;

    line-height: 1.2;               /* تقليل الارتفاع العمودي */

    padding: 0 !important;          /* إزالة الحشوة نهائيًا */

    margin: 0 !important;           /* إزالة المسافات تمامًا */

    border: none !important;

    background: transparent !important; /* بدون خلفية */

    max-width: 100%;                /* لا يتجاوز عرض السطر */

    border-radius: 0;

    white-space: pre-wrap;

    vertical-align: middle;         /* محاذاة تامة مع الصورة */

}



/* الأيقونات داخل الرسالة (ذهب-روبي-الخ) */

.icon, .emo_chat {

    width: 22px!important;

    height: 22px!important;

    vertical-align: middle;

    margin: 0 3px;

    display: inline-block;

    max-width: 100%;

}



.sticker_chat { height:80px; max-width:100%; vertical-align:bottom; }

.custom_chat { max-height:200px; max-width:400px; }

.chat_image { max-width:100%; height:100px; width:auto; margin:5px 0 0 0; border-radius:10px; }



#show_chat ul { position:absolute; bottom:0; max-height:100%; overflow-y:auto; padding-bottom:10px; }

#show_chat li { position:relative; }



.cclear, .spclear, .tpclear { display:table-cell; width:24px; font-size:10px; vertical-align:middle; text-align:center; cursor:pointer; }

.cdate { display:table-cell; width:65px; font-size:10px; vertical-align:middle; text-align:center; }

.cname { display:table-cell; vertical-align:middle; }



.chat_ghost { display: inline-block; width: auto; height: 11px; margin: 0 3px 0 0; }

.special_delete, .chat_more {

    position: absolute;

    top: 7px;

    right: 12px;

    font-size: 20px;

    color: #bababa;

    cursor: pointer;

    padding: 0;

    background: none;

    border: none;

}



/* رسائل النظام */

.chat_system {

    background: #f3f3f3 !important;

    border-left: 4px solid #ffeecb !important;

    color: #969696 !important;

    font-style: italic;

    margin-bottom: 8px;

    padding: 8px 18px;

    border-radius: 8px !important;

    font-size: 12px;

}

.sysname { font-weight:bold; font-size:16px; }



.topic_log { margin-top:10px; }



/********* التخصيصات للألوان الخاصة بالرتب *********/

.username.admin, .sysname.admin    { color: #e95237 !important; }

.username.vip, .sysname.vip        { color: #f3b80c !important; }

.username.staff, .sysname.staff    { color: #2273dc !important; }

.username.owner, .sysname.owner    { color: #ba19bb !important; }

/* للأسماء التي ترغب في إبرازها بلون معين عدل أو أضف كلاس هنا */



/* الكلاسات القديمة تُترك كما هي لضمان التوافق مع باقي النظام */



/* النظام 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 */

.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; line-height:0; font-size:0; display:inline-block; vertical-align:top; }

.chat_video{ width:100%; height:100%; display:block; object-fit:cover; }

.chat_cvideo{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:56px; height:56px; display:block; pointer-events:none;}

.private_logs .chat_video_container { width:200px; height:113px; position:relative; margin-top:5px; border-radius:8px; overflow:hidden; }





.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; border-radius:15px; overflow:hidden; }

.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; border-radius:10px; overflow:hidden; }

.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:6px; 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:50px; 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:160px; padding:0 5px; 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%; }

.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; left:50px; top:50px; z-index:201; padding-bottom:0; max-width:calc(100% - 50px) !important; }

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



/* left menu */

#left_menu { width:50px; font-size:18px; overflow:hidden; display:table-cell; }

#left_menu_content { width:100%; height:100%; overflow:hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(136,136,136,.1) transparent; direction: rtl; padding:10px 5px; }

#left_menu_content > * { direction: ltr; }

.left_menu_item { display:table; width:100%; height:40px; cursor:pointer; position:relative; border-radius:10px; margin-bottom:10px;  }

.left_menu_icon { display:table-cell; vertical-align:middle; text-align:center; position:relative; }







/* 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:50px; 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%; padding-bottom:60px; }



/* 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;}

.side_notify { width:11px; height:11px; border-radius:50%; display:none; position:absolute; top:unset; left:unset; bottom:12px !important; right:10px !important; }



/* 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; }



/* top notification */

#top_notify { position:fixed; top:20px; left:10px; width:100%; max-width:320px; display:flex; flex-direction:column; gap:10px; box-sizing:border-box; z-index:9999; }

.top_notify { max-width:100%; word-wrap:break-word; overflow-wrap:break-word; border-radius:8px; overflow:hidden; animation:slideIn 0.3s ease-out; }

.top_notify_avatar { width:40px; vertical-align:top; }

.top_notify_icon { width:30px; vertical-align:top; }

.top_notify_avatar img, .top_notify_icon img { width:40px; height:40px; border-radius:50%; }

.top_notify_icon img { width:30px; height:30px; border-radius:50%; }

.top_notify_btn { width:30px; text-align:center; vertical-align:top; }

@keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 0.95; } }



/* 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:24px; }



/* 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:230px; }

.state_profile { width: 20px; height: 20px; position: absolute; bottom: 5px; right:5px; z-index: 30; border: 2px solid #fff; border-radius: 50px; }

.state_note { width: 20px; height: 20px; 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%; min-height:220px; border-radius:20px 20px 0 0; }

.profile_top { padding:0 15px 15px 15px; position:relative; height:100%; }

.profile_avatar { display:table-cell; width:100px; vertical-align:bottom; position:relative; border-radius:5px; text-align:center; }

.avatar_profile { width:100px; height:100px; cursor:pointer; display:block; border-radius:50%; }

.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:60px; left:20px; border-radius:50px; bottom:10px; }

.avatar_spin { border-radius:50%; overflow:hidden; position:relative; z-index:30; }



/* avatar uploader */

.uploader { max-width: 240px; margin: 10px auto; font-family: system-ui, sans-serif; }

.av_slide_opt { width:40px; text-align:center; }

.stage { position: relative; width: var(--frame); height: var(--frame); margin: 12px 0; border-radius: 16px; overflow: hidden; background: #111; touch-action: none; margin:0 auto; }

canvas#view { width: 100%; height: 100%; display:block; }

.overlay { pointer-events: none; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 20000px rgba(0,0,0,.45); background: rgba(255,255,255,.06); outline-offset: -1px; }

.overlay.circle { border-radius: 50%; }

#avatar_file { display: none; }

#stage { width: 240px; height: 240px; }

#view  { width: 100%; height: 100%; display: block; }



/* 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; }



/* back to bottom */

#back_to_bottom { width:40px; position:absolute; top:5px; left:50%; transform:translateX(-50%); border-radius:15px; overflow:hidden; cursor:pointer;  display:none; text-align:center; }



/* theme preview */

.theme_wrap { padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }

.theme_preview { flex: 0 0 calc(50% - 5px); max-width: calc(50% - 5px); border-radius: 15px; overflow: hidden; display: flex; flex-direction: column; position:relative; }

.theme_control { position:absolute; bottom:10px; left:0; width:100%; z-index:1; text-align:right; padding:0 10px; }

.header_preview { height:30px; }

.header_preview_option { width:30px; text-align:center; font-size:12px; }

.preview_name { font-weight:bold;  font-size:7px !important; }

.chat_preview { height:150px; padding:10px 8px; position:relative; z-index:1;}

.chat_preview_back { z-index: 0; pointer-events: none;}

.chat_preview_back { position:absolute;top:0;left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; opacity:.4; }

.chat_preview > *:not(.chat_preview_back) { position: relative; z-index: 1; }

.log_preview { margin:1px 0; }

.avatar_preview { width:20px; height:20px; vertical-align:middle; }

.avatar_preview img { width:20px; height:20px; border-radius:50%; display:block; }

.content_preview { padding:1px 5px; font-size:8px !important; vertical-align:middle; }

.preview_bubble { padding:3px; border-radius:5px; display:inline-block; margin-top:1px; }

.preview_author { display:inline-block; position:absolute; bottom:5px; left:10px; font-size:9px; padding:3px 6px; border-radius:5px; z-index:202; }



/* private typing */

#ptyping { position:absolute; bottom:0px; left:10px; width:auto; border-radius:100px; padding:3px; font-size:20px; display:none; }

#ptyping_avatar { width:18px; height:18px; }

#ptyping_av { width:18px; height:18px; border-radius:50%; }

#ptyping_text { width:50px; height:18px; }



/* private view */

.prview { padding-right:5px; }

.prview_hide { display:none; }



/* input extra */

#main_input_extra { width:auto; position:absolute; bottom:0; left:0; z-index:100; padding:5px; display:none; border-radius:5px; max-width:calc(100% - 10px); margin:5px; }

.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:530px; max-width:calc(100% - 10px); border-radius:15px; height:222px; position:absolute; bottom:0; left:0; z-index:100; display:none; margin:5px; }

#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;  border-radius:15px; overflow:hidden; }

.videosize, .audiosize, .groupsize, .groupvideosize { height:100% !important; width:100% !important; }

.callwidth { width:360px; max-width:100%; }

.callheight { height:300px; max-height:100%; }

.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_player video { width:100%; height:100%; object-fit:cover; }

.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_group_control { display:table; width:100%; position: fixed; bottom: 15px; left: 0;  z-index:200; }

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



/* call item */

.call_item_container { padding:15px 15px 60px 15px; }

.call_video_item_container { padding:12px 12px 12px 12px; }

.call_item { margin-bottom:5px; padding:5px; border-radius:5px; cursor:pointer; }

.call_item_avatar { width:30px; }

.call_item_avatar img { display:block; width:30px; height:30px; border-radius:5px; }

.call_item_name { padding:0 10px; font-size:16px; }

.call_mic { width:30px; }

.call_mic img { width:20px; height:20px; margin:0 auto; display:block; }

.call_action { width:40px; font-size:16px; text-align:center; }



/* call list */

.call_lock { width:20px; height:20px; border-radius:50%; display:block; margin:0 auto; }

.call_ctag { width:14px; height:14px; border-radius:50%; display:block; margin:0 auto; }

.call_count { font-size:14px; font-weight:bold; text-align:right; }

.call_opt { width:20px; }

.call_cicon_wrap { width:46px; height:46px; }

.call_cicon_wrap img { width:46px; height:46px; border-radius:5px; display:block; }



/* call join */

.incall_user { display:inline-block; width:46px; height:46px; border-radius:50%; margin:0 -3px; }



/* call request box */

#call_request { position:absolute; top:90px; left:50%; transform: translate(-50%, -50%); width:280px; border-radius:100px; z-index:1300; }

.call_avatar { width:40px; height:40px; }

.call_avatar img { width:40px; height:40px; border-radius:50%; display:block; }

.call_btn { width:40px; height:40px; cursor:pointer; }

.call_btn img { width:34px; height:34px; border-radius:50%; display:block; margin:0 auto; }

.call_spacer { width:5px; }



/* 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; }

.top_modal_out { display:none; position: fixed; z-index: 1002; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; cursor:pointer; }

.small_modal_in { border-radius:20px; margin: 5% auto; max-width:400px; width: 96%; position:relative;  }

.large_modal_in { border-radius:20px; margin: 5% auto; max-width:500px; width: 96%; position:relative; }

.over_modal_in { border-radius:20px; margin: 6% auto; max-width:500px; width: 96%; position:relative; }

.top_modal_in { border-radius:20px; margin: 6% auto; max-width:500px; width: 96%; position:relative; }

.over_emodal_in { border-radius:20px; margin: 6% auto; max-width:500px; width: 96%; 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:36px; height:36px; position:absolute; top:10px; right:10px; font-size:18px; text-align:center; display:table; }

.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:5px; display:block; width:180px; 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:8px; border-radius:10px; display:inline-block; max-width:calc(100% - 40px); margin-bottom:-5px; }

.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; word-break:break-word; }

.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; padding:0 5px; }

.help_title { font-size:18px; font-weight:bold; margin-bottom:5px; }

.help_text { padding:10px 0; }

.help_tlink { font-size:15px; font-weight:bold; padding-bottom:5px; }

.help_link { margin-bottom:10px; display:block; }



/* 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, .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:24px; height:24px; 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:24px; height:24px; 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 8px; display:inline-block; line-height:1em; margin-top:2px; border-radius:10px; 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; }

/* ===== ترتيب الرتبة + الاسم + الفاصلة + النص ===== */

.rowline {

  display: flex;

  align-items: center;   /* المحاذاة الرأسية */

  gap: 0 !important;     /* بدون أي مسافات بين العناصر */

  flex-wrap: nowrap;     /* لا تنتقل للأسطر الثانية */

}



/* أيقونة الرتبة صغيرة جداً وبمحاذاة الاسم */

.chat_rank {

  width: 15px !important;

  height: 15px !important;

  margin: 0 !important;

  padding: 0 !important;

  vertical-align: middle;

  display: inline-block;

  transform: translateY(1px); /* تعديل بسيط لتكون بمحاذاة النص تمامًا */

}



/* الاسم ملاصق للرتبة مباشرة */

.username {

  margin: 0 2px 0 3px !important;

  padding: 0 !important;

  font-weight: 700;

  font-size: clamp(14px, 2.8vw, 15px);

  line-height: 1.3;

  display: inline-block;

  vertical-align: middle;

}



/* الفاصلة قريبة جداً من الاسم */

.name_sep {

  margin: 0 3px 0 1px !important;

  font-weight: 700;

  color: #444;

  display: inline-block;

  vertical-align: middle;

}



/* النص ملاصق للفاصلة بدون خلفية */

.bubble {

  margin: 0 !important;

  padding: 0 !important;

  display: inline-block;

  color: #303030;

  font-size: clamp(14px, 2.8vw, 15px);

  line-height: 1.4;

  background: transparent !important;

  border: none !important;

  border-radius: 0 !important;

  vertical-align: middle;

}

/* شدّ الرسالة وخلّيها قصيرة */

#show_chat li.ch_logs{

  padding: 4px 10px !important;

  min-height: 0 !important;

}



/* صورة المستخدم صغيرة وملاصقة للنص */

#show_chat .chat_avatar{

  display:flex !important;

  align-items:center;

  margin-right: 6px !important;   /* قرب الصورة من النص */

  width:auto !important;

}

#show_chat .cavatar{

  width:24px !important;

  height:24px !important;

  border-radius:4px !important;

}



/* ألغِ أي حشوات أعلى/أسفل في النص */

#show_chat .my_text{ padding:0 !important; }



/* صف واحد ملاصق (رتبة + اسم + : + نص) */

#show_chat .chat_message{ display:flex; align-items:center; gap:6px; }

#show_chat .rowline{ flex:1 1 auto; }

#show_chat .row_main{ display:flex; align-items:center; gap:4px; flex-wrap:nowrap; }



/* الرتبة صغيرة وقريبة */

#show_chat .chat_rank{ width:16px; height:16px; }



/* الاسم والفاصل بدون أي فراغ */

#show_chat .username{

  font-size:15px; font-weight:700;

  margin:0 !important; line-height:1 !important;

}

#show_chat .name_sep{

  margin:0 2px !important;

  line-height:1 !important;

}



/* النص ملاصق تمامًا للصورة (لا padding ولا margin) */

#show_chat .bubble,

#show_chat .mbubble{

  display:inline-block !important;

  line-height:1.2 !important;

  padding:0 !important;

  margin:0 !important;

  border:none !important;

  background:transparent !important;

  vertical-align:middle !important;

  max-width:100% !important;

}