@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

/* ==========================================================
   site colors & font ( owner stylesheet )
   ========================================================== */

*{
	outline: none;
	-webkit-tap-highlight-color: transparent;
	font-family: "Tajawal", sans-serif;
  font-weight: bold;
  font-style: normal;
}

.ch_logs {
    padding: 7px;
    display: table;
    width: 100%;
    table-layout: fixed;
    border: .5px solid #d5d5ca;
    border-radius: 8px 0 0 8px;
    margin-top: 1px;
    border-right: solid #31789866;
    border-right-width: 2px;
    font-weight: bold;
    color: #000;
    background: #f0f8ff00;
}
.ch_logs{
    display:block;
    contain:layout paint;
}

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

#chat_head .head_option {
    font-size: 14px
}

#chat_head .head_option p,.panel_bar .panel_option p {
    font-size: 10px!important
}

/* alternate chat log ( was .log2 ) */
.log2, #show_chat li.ch_logs:nth-child(even of .ch_logs) {
    background: #fffee2
}
ul li.ch_dlogs:nth-child(odd of .ch_logs) {
    background: #f0f8ff00
}

.sys_log {
    background: #fffee291;
    border: 1px solid #ccc
}

.bprogress {
    background: #74b20e;
    color: #fff
}
.cavatar {
    width: 37px;
    height: 37px
}

.input_item {
    color: #ff5722
}
.send_btn {
    background: #ff5722;
    color: #fff;
    border-radius: 5px;
}
#content, #message_content {
    font-family: Courier\ New;
    font-size: 14px!important;
}
input, textarea, .post_input_container {
    background: #f8fbfb;
    border: 1px solid #a1959559!important;
    color: #000;
}
.back_input {
    background: linear-gradient(to bottom,#dae5eb 0%,#fdfefe 100%);
    border-top: 1px solid #bfc9d2;
    border-bottom: 1px solid #bfc9d2;
}
.bhead {
    background: linear-gradient(to bottom,#a5c0e2 0%,#5a87ca 53%,#5a87ca 100%);
    border-bottom: 1px solid #416ead;
    color: #fff;
}
.bfoot {
    background: linear-gradient(to bottom,#a5c0e2 0%,#5a87ca 53%,#5a87ca 100%);
    border-top: 1px solid #416ead;
    color: #fff;
}
.my_text {
    display: table-cell;
    vertical-align: middle;
    padding: 0 0 0 6px;
    position: relative;
}

/* ==========================================================
   header / footer labels, join message, ranked user list
   ========================================================== */

/* ---------- header & footer labels ---------- */

#chat_head .head_option i { display:block; line-height:1; }
#chat_head .head_label { display:block; margin-top:4px; font-size:10px; line-height:1; white-space:nowrap; }
#my_menu .footer_item { width:60px; font-size:16px; }
#my_menu .footer_item i { display:block; font-size:16px; line-height:1; }
#my_menu .foot_label { display:block; margin-top:4px; font-size:10px; line-height:1; white-space:nowrap; }

/* no gap between the last message and the input box */
#show_chat ul { padding-bottom:0; }

/* ---------- system messages & join message ---------- */

/* time : original table cell, only narrower and smaller */
.cdate { width:62px; padding:0 2px; font-size:9px; font-weight:bold; text-align:right; white-space:nowrap; color:#000; }
.cdate .reltime { font-size:9px; font-weight:bold; }
#show_chat .cclear.logs_menu { width:2px; padding:0; font-size:0; visibility:hidden; pointer-events:none; }
.reltime { direction:rtl; unicode-bidi:isolate; }
.sys_date { display:table-cell; width:62px; padding:0 2px; vertical-align:middle; text-align:right; font-size:9px; font-weight:bold; color:#000; white-space:nowrap; }
#show_chat li.sys_log { margin-top:1px; border-radius:8px 0 0 8px; }

#show_chat li.sys_log.system__join { padding:9px 10px; color:#fff; border:none; border-radius:12px; background:linear-gradient(135deg, #a5c0e2 0%, #5a87ca 45%, #3d6fb8 100%); box-shadow:0 1px 4px rgb(40,70,120,0.35); }
#show_chat li.system__join .chat_savatar { width:42px; vertical-align:middle; }
#show_chat li.system__join .savatar { display:none; }
#show_chat li.system__join .chat_savatar:before { content:"\f2f6"; display:block; width:34px; height:34px; line-height:34px; border-radius:50%; text-align:center; font-family:"Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight:900; font-size:14px; color:#3d6fb8; background:#fff; box-shadow:0 1px 3px rgb(0,0,0,0.2); }
#show_chat li.system__join .chat_system { font-size:14px; line-height:1.9; color:#fff; text-shadow:0 1px 2px rgb(0,0,0,0.2); }
#show_chat li.system__join .sysname { display:inline-block; margin:0 3px; padding:0 10px; border-radius:20px; background:#fff; color:#2f5ea8; font-size:13px; text-shadow:none; }
#show_chat li.system__join .sysroom { display:inline-block; margin:0 3px; padding:0 10px; border-radius:20px; background:rgb(0,0,0,0.22); color:#fff; font-size:12px; white-space:nowrap; }
#show_chat li.system__join .sys_date { color:#eaf1fb; }

/* ---------- room topic : blue card with moving white dots ---------- */

#show_chat li.topic_log {
	width:calc(100% - 8px); margin:4px; padding:12px 10px; color:#000; border:none; border-radius:14px; box-shadow:0 1px 3px rgb(0,0,0,0.25);
	background-color:#81a3d1;
	background-image:
		radial-gradient(circle at 13px 29px, #fff 0 1.4px, transparent 1.9px),
		radial-gradient(circle at 7px 8px, #fff 0 2.2px, transparent 2.7px),
		radial-gradient(circle at 38px 10px, #fff 0 2.5px, transparent 3.0px),
		radial-gradient(circle at 41px 7px, #fff 0 1.4px, transparent 1.9px),
		radial-gradient(circle at 17px 6px, #fff 0 1.9px, transparent 2.4px),
		radial-gradient(circle at 31px 30px, #fff 0 1.0px, transparent 1.5px),
		radial-gradient(circle at 34px 15px, #fff 0 1.0px, transparent 1.5px),
		radial-gradient(circle at 58px 11px, #fff 0 1.9px, transparent 2.4px),
		radial-gradient(circle at 76px 19px, #fff 0 2.5px, transparent 3.0px),
		radial-gradient(circle at 84px 84px, #fff 0 1.2px, transparent 1.7px),
		radial-gradient(circle at 11px 77px, #fff 0 1.9px, transparent 2.4px),
		radial-gradient(circle at 54px 10px, #fff 0 1.9px, transparent 2.4px),
		radial-gradient(circle at 9px 75px, #fff 0 1.2px, transparent 1.7px),
		radial-gradient(circle at 21px 41px, #fff 0 2.5px, transparent 3.0px),
		radial-gradient(circle at 22px 73px, #fff 0 1.6px, transparent 2.1px),
		radial-gradient(circle at 77px 43px, #fff 0 1.0px, transparent 1.5px),
		radial-gradient(circle at 50px 30px, #fff 0 1.9px, transparent 2.4px),
		radial-gradient(circle at 52px 99px, #fff 0 1.9px, transparent 2.4px),
		radial-gradient(circle at 144px 20px, #fff 0 1.0px, transparent 1.5px),
		radial-gradient(circle at 19px 56px, #fff 0 1.9px, transparent 2.4px),
		radial-gradient(circle at 140px 113px, #fff 0 1.6px, transparent 2.1px),
		radial-gradient(circle at 84px 123px, #fff 0 2.5px, transparent 3.0px),
		radial-gradient(circle at 120px 96px, #fff 0 1.9px, transparent 2.4px),
		radial-gradient(circle at 67px 50px, #fff 0 1.4px, transparent 1.9px);
	background-size:40px 40px, 46px 46px, 52px 52px, 58px 58px, 64px 64px, 70px 70px, 76px 76px, 82px 82px, 88px 88px, 94px 94px, 100px 100px, 106px 106px, 112px 112px, 118px 118px, 124px 124px, 130px 130px, 136px 136px, 142px 142px, 150px 150px, 160px 160px, 170px 170px, 180px 180px, 190px 190px, 200px 200px;
	animation:topicDots 14s linear infinite;
}
@keyframes topicDots {
	from { background-position:0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
	to { background-position:40px 40px, -46px 46px, 52px 104px, -58px 58px, 64px 64px, -70px 140px, 76px 76px, -82px 82px, 88px 176px, -94px 94px, 100px 100px, -106px 212px, 112px 112px, -118px 118px, 124px 248px, -130px 130px, 136px 136px, -142px 284px, 150px 150px, -160px 160px, 170px 340px, -180px 180px, 190px 190px, -200px 400px; }
}
@media (prefers-reduced-motion:reduce){
	#show_chat li.topic_log { animation:none; }
}
.topic_log .topic_icon { width:52px; vertical-align:middle; }
.topic_log .tpicon { display:none; }
.topic_log .topic_icon:before { content:"\f0a1"; display:block; width:52px; height:52px; line-height:52px; border-radius:50%; text-align:center; font-family:"Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight:900; font-size:22px; color:#f5a623; background:#f1f1f1; box-shadow:0 1px 3px rgb(0,0,0,0.25); }
.topic_log .topic_text { vertical-align:middle; padding:0 12px; }
.topic_log .tptitle { display:none; }
.topic_log .topic_text > .btable { position:absolute; top:-6px; inset-inline-end:0; width:auto; }
.topic_log .tpclear { display:block; width:28px; height:28px; line-height:28px; font-size:14px; color:#000; }
.topic_log .tptext { padding-inline-end:26px; font-size:16px; line-height:1.7; color:#000; }

/* ---------- right panel bar ---------- */

#right_panel_bar, #left_panel_bar { background:linear-gradient(to bottom,#a5c0e2 0%,#5a87ca 53%,#5a87ca 100%); border-bottom:1px solid #416ead; color:#fff; }

/* user list header : labelled tabs, clear selected state, large touch targets */
#right_panel_bar { display:flex; align-items:stretch; gap:4px; height:56px; padding:6px; box-shadow:0 1px 4px rgb(0,0,0,0.2); position:relative; z-index:4; }
#right_panel_bar > .bcell_mid { display:none; }
#right_panel_bar .panel_bar_item { flex:none; display:flex; align-items:center; justify-content:center; width:36px; border-radius:50%; align-self:center; height:36px; font-size:16px; background:rgb(255,255,255,0.16); transition:background .15s ease, transform .1s ease; }
#right_panel_bar .panel_bar_item:hover { background:rgb(255,255,255,0.3); }
#right_panel_bar .panel_option { flex:1; min-width:0; width:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:11px; font-size:16px; color:#fff; transition:background .15s ease, color .15s ease, transform .1s ease; }
#right_panel_bar .panel_option i { line-height:1; text-shadow:0 1px 1px rgb(0,0,0,0.2); }
#right_panel_bar .panel_option:after { display:block; max-width:100%; font-size:10px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#users_option:after { content:"المتواجدون"; }
#friends_option:after { content:"الأصدقاء"; }
#staff_option:after { content:"الإدارة"; }
#gcall_option:after { content:"مكالمات"; }
#search_option:after { content:"بحث"; }
#right_panel_bar .panel_option:hover { background:rgb(255,255,255,0.18); }
#right_panel_bar .panel_option:active, #right_panel_bar .panel_bar_item:active { transform:scale(0.94); }
#right_panel_bar .panel_option.bselected { background:#fff; color:#3d6fb8; box-shadow:0 2px 6px rgb(30,60,110,0.35); }
#right_panel_bar .panel_option.bselected i { text-shadow:none; }

/* ---------- user list ---------- */

#chat_right.back_panel { background:#fff; }
#chat_right_data { scrollbar-width:thin; scrollbar-color:#b9bec7 transparent; }
#chat_right_data::-webkit-scrollbar { width:5px; }
#chat_right_data::-webkit-scrollbar-thumb { background:#b9bec7; border-radius:10px; }
#container_user.pad10 { padding:0 0 10px 0; }
#container_user .online_user, #container_user .offline_user { padding:0; }
#container_user .user_count { padding:7px 10px; font-size:12px; background:#e1e4e9; color:#4a4f58; border-bottom:1px solid #d0d4da; }
#container_user .ucount { display:inline-block; min-width:20px; margin:0 4px; padding:2px 7px; text-align:center; font-size:11px; line-height:1.3; background:#5a87ca; color:#fff; }

/* rank group headers : stay visible while scrolling their group */
.ugroup_head { position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:center; gap:8px; height:30px; padding:0 34px; overflow:hidden; color:#fff; background:linear-gradient(to bottom,#a5c0e2 0%,#5a87ca 53%,#5a87ca 100%); border-bottom:1px solid #416ead; }
.ugroup_title { font-family:Georgia, 'Times New Roman', serif; font-style:italic; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px rgb(0,0,0,0.45); }
.ugroup_count { flex:none; min-width:20px; padding:1px 6px; border-radius:20px; text-align:center; font-size:11px; line-height:1.4; background:rgb(0,0,0,0.28); color:#fff; }
.ugroup_admin:before, .ugroup_admin:after,
.ugroup_vip:before, .ugroup_vip:after { position:absolute; top:0; line-height:30px; font-family:"Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight:900; font-style:normal; font-size:13px; color:#fff; opacity:0.9; }
.ugroup_admin:before, .ugroup_vip:before { left:12px; }
.ugroup_admin:after, .ugroup_vip:after { right:12px; }
.ugroup_admin:before, .ugroup_admin:after { content:"\f132"; }
.ugroup_vip:before, .ugroup_vip:after { content:"\f219"; font-size:11px; }
.ugroup_princess { background:linear-gradient(to bottom,#f5b8dc 0%,#d9569f 53%,#d9569f 100%); border-bottom-color:#b53f84; }

/* user cards */
#container_user .ugroup { padding-bottom:4px; }
#container_user .offline_user { padding:3px 0; }
#container_user .user_item { width:calc(100% - 8px); min-height:48px; margin:3px 4px; padding:4px 8px; background:#fff; border-left:3px solid #317898; border-right:3px solid #317898; border-radius:8px; box-shadow:0 1px 2px rgb(0,0,0,0.18); transition:box-shadow .15s ease, transform .1s ease; }
#container_user .user_item.bhover:hover { background:#f3f7fd; box-shadow:0 2px 6px rgb(0,0,0,0.28); }
#container_user .user_item:active { transform:scale(0.985); }
#container_user .user_item_avatar { width:40px; }
#container_user .user_item_avatar .acav { width:40px; height:40px; object-fit:cover; box-shadow:0 0 0 2px #fff, 0 1px 3px rgb(0,0,0,0.3); }
#container_user .list_status { width:13px; height:13px; left:auto; right:-2px; bottom:-1px; padding:0; border:2px solid #fff; box-sizing:content-box; }
#container_user .user_item_data { padding:0 10px; }
#container_user .user_item .username { display:block; font-size:14px; line-height:1.35; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#container_user .list_mood { font-size:11px; line-height:1.4; font-weight:normal; color:#666; }
#container_user .list_mood:empty { display:none; }
#container_user .user_item_icon { width:26px; }
#container_user .user_item_icon.icrank { width:24px; padding-inline-end:4px; }
#container_user .user_item_icon.icreallyonline { width:20px; }
#container_user .really_online_dot { display:block; width:12px; height:12px; margin:0 auto; border-radius:50%; object-fit:cover; background:#2ecc71; box-shadow:0 0 0 2px #fff, 0 0 4px rgb(46,204,113,0.8); }
#container_user .list_rank { height:17px; display:block; margin:0 auto; filter:drop-shadow(0 1px 1px rgb(0,0,0,0.25)); }
#container_user .list_flag { height:14px; display:block; margin:0 auto; border-radius:2px; box-shadow:0 0 0 1px rgb(0,0,0,0.15); }
#container_user .list_mute, #container_user .list_ghost { height:16px; width:auto; display:block; margin:0 auto; }

/* offline users */
#container_user .user_item.offline { opacity:0.6; box-shadow:none; }
#container_user .user_item.offline .acav { filter:grayscale(1); }
#container_user .user_item.offline:hover .acav { filter:none; }

/* ---------- user font sizes ( name & main chat text ) ---------- */

.username.nsz1, .nsz1 { font-size:12px !important; line-height:1.4 !important; }
.username.nsz2, .nsz2 { font-size:13px !important; line-height:1.4 !important; }
.username.nsz3, .nsz3 { font-size:14px !important; line-height:1.4 !important; }
.username.nsz4, .nsz4 { font-size:15px !important; line-height:1.4 !important; }
.username.nsz5, .nsz5 { font-size:16px !important; line-height:1.4 !important; }
.username.nsz6, .nsz6 { font-size:17px !important; line-height:1.4 !important; }
.username.nsz7, .nsz7 { font-size:18px !important; line-height:1.4 !important; }
.tsz1 { font-size:13px !important; line-height:1.6 !important; }
.tsz2 { font-size:14px !important; line-height:1.6 !important; }
.tsz3 { font-size:15px !important; line-height:1.6 !important; }
.tsz4 { font-size:16px !important; line-height:1.6 !important; }
.tsz5 { font-size:17px !important; line-height:1.6 !important; }
.tsz6 { font-size:18px !important; line-height:1.6 !important; }
.tsz7 { font-size:20px !important; line-height:1.6 !important; }

/* ---------- private chat header : same colors as the main header & footer ---------- */

#private_top.back_ptop { color:#fff; background:linear-gradient(to bottom,#a5c0e2 0%,#5a87ca 53%,#5a87ca 100%); border-bottom:1px solid #416ead; box-shadow:0 1px 4px rgb(0,0,0,0.2); }
#private_top #private_av { border:2px solid #fff; box-shadow:0 1px 3px rgb(0,0,0,0.25); }
#private_top #private_name p { color:#fff; text-shadow:0 1px 1px rgb(0,0,0,0.2); }
#private_top .private_opt { color:#fff; transition:background .15s ease; }
#private_top .private_opt:hover { background:rgb(255,255,255,0.18); }
#private_top .private_opt i { text-shadow:0 1px 1px rgb(0,0,0,0.2); }