.top_level::before {
    content: attr(data-level);
    display: inline-block;
    background: #6100d5;
    color: #fffbfb;
    font-size: 12px;
    padding: 0px 4px;
    border-radius: 7px 0 7px 0;
    margin-right: 5px;
    position: absolute;
    z-index: 3;
}

.user_item{
 padding: 5px 2px;
}
.user_item_avatar .acav,
.cavatar {
  border-radius: 50% !important;
  overflow: hidden;
}
.user_level {
    color: #fff;
    position: absolute;
    top: 39px;
    right: 0px;
    transform: translateX(-12%);
    font-size: 7px;
    font-weight: 600;
    padding: 1px 3px;
    border-radius: 0 0 100px 100px;
    text-align: center;
    border: solid 1px #fff;
    /* box-shadow: #6666662b 0 4px 0 0; */
    width: 40px;
    z-index: 1;
}
.level_cuser{
 display: flex;
    flex-direction: column;
    position: absolute;
    left: 1px; 
    top: 19px;
}
.level_user_list{
 position: absolute;
    font-size: 10px;
    left: 0;
    top: 0px;
    padding: 3px;
    background: #6100d5;
    border-radius: 7px 0 7px 0;
    color: white;
    font-family: monospace;
}

/* .user_item_icon {
    margin-bottom: 5px;
} */
/* .user_item {
    padding: 11px 10px;
} */
/* ================================
   فقاعات النص (Chat Bubble)
================================= */
.my_text::before {
    content: " ";
    position: absolute;
    right: -19px;
    top: 0px;
    color: #fff;
    width: 0;
    height: 0;
    border: 10px solid #fff;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}
.my_text {
    position: relative;
    padding: 1px 8px 5px 2px !important;
    border-radius: 0 0 12px 12px;
    min-width: 200px;
}
.cdate {
    font-family: 'Tajawal',sans-serif;
    font-size: 9px;
}


/* الواان السهم */

.my_text.chatbox-red::before {
    border-left-color:#f7cfcf
}
.my_text.chatbox-green::before {
    border-left-color:#dff0c7
}
.my_text.chatbox-blue::before {
    border-left-color:#b9e7f3
}
.my_text.chatbox-purple::before {
    border-left-color:#e6d4f5
}
.my_text.chatbox-orange::before {
    border-left-color:#f3e6d4
}
.my_text.chatbox-pink::before {
    border-left-color:#fbcde8
}


/* الوان الاسم */

:root {
    --shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.chatbox-pink .username {
    color: #76002D;
    text-shadow: var(--shadow);
}

.chatbox-orange .username {
    color: #7A4100;
    text-shadow: var(--shadow);
}

.chatbox-blue .username {
    color: #004466;
    text-shadow: var(--shadow);
}

.chatbox-red .username {
    color: #660000;
    text-shadow: var(--shadow);
}

.chatbox-green .username {
    color: #2D6600;
    text-shadow: var(--shadow);
}

.chatbox-purple .username {
    color: #5A2585;
    text-shadow: var(--shadow);
}


/* الوان تاريخ */

.chatbox-red .cdate {
    color: #880000;
    font-size: 10px;
}

.chatbox-blue .cdate {
    color: #00546e;
    font-size: 10px;
}

.chatbox-green .cdate {
    color: #2d4600;
    font-size: 10px;
}

.chatbox-purple .cdate {
    color: #7826a5;
    font-size: 10px;
}

.chatbox-orange .cdate {
    color: #804000;
    font-size: 10px;
}

.chatbox-pink .cdate {
    color: #901085;
    font-size: 10px;
}

/* ألوان الصناديق */
:root {
    --padding: 15px;
    --border-radius: 10px;
    --border-color: rgba(0, 0, 0, 0.2);
    --shadow-default: 2px 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-hover: 4px 4px 10px rgba(0, 0, 0, 0.15);
    --scale-hover: 1.04;
}

/* تصميم الصندوق */
.chatbox {
    padding: var(--padding);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-default);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.chatbox:hover {
    transform: scale(var(--scale-hover));
    box-shadow: var(--shadow-hover);
}

/* ألوان الصناديق باستخدام متغيرات */
.chatbox-red { background-color: #f7cfcf; border-left: 4px solid #d87b7b; }
.chatbox-green { background-color: #dff0c7; border-left: 4px solid #93b36b; }
.chatbox-blue { background-color: #b9e7f3; border-left: 4px solid #5ba1bd; }
.chatbox-purple { background-color: #e6d4f5; border-left: 4px solid #9e7bb8; }
.chatbox-orange { background-color: #f3e6d4; border-left: 4px solid #b9976b; }
.chatbox-pink { background-color: #fbcde8; border-left: 4px solid #d874a2; }

/* اكواد خاصه */
.chatbox-black2{position:relative;background:linear-gradient(135deg,#fff 0%,#f3e8ff 40%,#d9b8ff 100%);border-left:5px solid #f00;box-shadow:0 3px 6px rgba(0,0,0,0);padding:6px 10px;border-radius:10px;color:#111;text-shadow:0 0 2px rgba(255,255,255,0.6)}.chatbox-black2 .username{color:#f00;font-weight:bold;border-bottom:2px dotted #f00;border-left:2px dotted #f00;border-radius:20px 0 0 20px;padding-left:4px;text-shadow:0 0 2px rgba(255,255,255,0.8)}.chatbox-black2-text-border{border:1px solid #f00;box-shadow:0 0 2px #f00,0 0 6px #f00,0 0 10px rgba(255,0,0,0.6);border-radius:6px;padding:3px}.my_text.chatbox-black2::before{content:"";position:absolute;right:-10px;top:14px;border:8px solid transparent;border-left:10px solid rgba(217,184,255,0)}.chatbox-black{position:relative;background:linear-gradient(135deg,#fff 0%,#f3f3f3 40%,#ece9ff 100%);border-left:5px solid #000;box-shadow:0 3px 6px rgba(0,0,0,0.25);padding:6px 10px;border-radius:10px;color:#000}.chatbox-black .username{color:#000;font-weight:bold;border-bottom:2px dotted #000;border-left:2px dotted #000;border-radius:20px 0 0 20px;padding-left:4px}.chatbox-black-text-border{border:1px solid #000;box-shadow:0 0 2px #000,0 0 6px rgba(0,0,0,0.6);border-radius:6px;padding:3px}.chatbox-black .cdate,.chatbox-black2 .cdate{font-size:10px;opacity:0.8}.chatbox-black .cdate,.chatbox-black-text{color:#000}.chatbox-black2 .cdate{color:#333}.my_text.chatbox-black::before{content:none!important}


/* الوان كتابه */

.chatbox-red-text {
    color: #880000;
}

.chatbox-green-text {
    color: #2d4600;
}

.chatbox-blue-text {
    color: #00546e;
}

.chatbox-purple-text {
    color: #7826a5;
}

.chatbox-orange-text {
    color: #804000;
}

.chatbox-pink-text {
    color: #901085;
}


.chat_message {

    font-weight: bold;
}

body {
  user-select: none;
}
    
.video-container {
  position: relative;
  padding-bottom: 70%;
  height: 0;
    
}

.video-container video {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
	
	
.video-js{
  position: absolute !important;
  height: 100%;
  width: 100%;
}


#chat_right_data::-webkit-scrollbar{display:none}#chat_right_data{-ms-overflow-style:none;scrollbar-width:none}::-webkit-scrollbar{width:.21em}::-webkit-scrollbar-thumb{background:#a4a4a4}*{scrollbar-width:thin}
	
.user-box {
  position: relative;
    
    background: linear-gradient(135deg,#0b1f3a,#0e3a6d) !important;
    color: #ffffff !important;
    border: none !important;
}