.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;
} */
.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 .username {
    color:#ff0000;
    border-bottom: 2px dotted red;
  border-left: 2px dotted red;
  border-radius: 20px 0px 0px 20px;
  padding: 0px 0px 0px 3px;
}

.chatbox-black2 {
     background: linear-gradient(to left, #ece9ff, #D4B0FF);
     border-left: 5px solid #ff0000;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.chatbox-black2-text-border {
    border:1px solid;
    border-color:#ff0000;
    box-shadow: 0px 0px 1px #ff0000, 0px 0px 4px #ff0000, 0px 0px 5px #ff0000;
}

.my_text.chatbox-black2::before {
    border-left-color:#ece9ff
}

.chatbox-black2 .cdate {
    color: #000000;
    font-size: 10px;
}

.chatbox-black .username {
    color:#000000
}
.my_text.chatbox-black::before {
    border-left-color:#ece9ff
}
.chatbox-black .cdate {
    color: #000000;
    font-size: 10px;
}
.chatbox-black {
     background: linear-gradient(to left, #ece9ff, #fff);
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
     border-left: 5px solid #000;
}
.chatbox-black-text {
    color:#ffffef
}
.chatbox-black-text-border {
    border:1px solid;
    border-color:#000;
    box-shadow: 0px 0px 1px #000000, 0px 0px 4px #000000, 0px 0px 5px #000000;
}


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

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

/* تعريف متغيرات للألوان والخصائص لتعزيز المرونة */
:root {
  --primary-color: #000000;
  --secondary-color: #545454;
  --border-color: #fff;
  --focus-color: #000;
  --label-color-hover: #222;
  --bg-transparent: transparent;
  --shadow-light: rgba(0, 0, 0, 0.2);
}

/* تحسين تصميم حقول الإدخال */
.user-box input {
  width: 100%;
  padding: 8px 0; /* تقليل الحشو لجعل العنصر أكثر كفاءة */
  font-size: 15px; /* تحسين حجم النص ليكون متناسبًا */
  color: var(--primary-color);
  margin-bottom: 20px; /* تقليل التباعد بين العناصر */
  border: none;
  border-bottom: 1px solid var(--border-color);
  outline: none;
  background: var(--bg-transparent);
  transition: all 0.3s ease-out; /* تحسين استجابة الإدخال */
}

/* تحسين ظهور النص */
.user-box label {
  position: absolute;
  top: 0;
  left: 78%;
  padding: 4px 0;
  font-size: 14px;
  color: var(--secondary-color);
  pointer-events: none;
  transition: 0.2s ease-out;
}

/* تحسين التفاعل عند التركيز */
.user-box input:focus ~ label,
.user-box input:valid ~ label {
  top: -12px;
  left: 79%;
  color: var(--focus-color);
  font-size: 12px;
}

/* تحسين التأثيرات عند التفاعل */
.user-box input:focus {
  border-bottom: 1px solid var(--focus-color);
  box-shadow: 0px 2px 6px var(--shadow-light);
}

.user-box label:hover {
  color: var(--label-color-hover);
}



/* تحسين الهوامش والمسافات */
.k2_18 {
    padding-left: 20px;
    padding-right: 10px;
    padding-top: 15px;
}

/* تحسين الأبعاد والصور الرمزية */
.k2_11 {
    width: 25px;
    height: 25px;
    padding-top: 3px;
}

/* جعل العناصر دائرية وإضافة تأثير ظل ناعم */
.k2_2 {
    border-radius: 50px;
    border: 1px solid #000000 !important;
    transition: border-color 0.3s ease-in-out;
}

.disr {
    border-radius: 50px;
    border: 0px solid #fff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease-in-out;
}

/* تحسين الخلفية */
.k2_3 {
    background: #fff;
}

/* تحسين النصوص */
.k2_4 {
    margin-right: -1%;
    margin-top: 10%;
    color: #000;
    font-size: 15px;
    font-weight: bold;
}

/* تحسين حواف العناصر */
.k2_5 {
    padding: 25%;
}

.k2_6 {
    margin-top: -15%;
    margin-right: 88%;
}

/* جعل العناصر ثابتة عند التمرير */
.k2_60ak {
    position: sticky;
    margin-top: -15%;
    margin-right: 88%;
}

/* تحسين الهوامش الداخلية */
.ketoXx {
    padding-left: 5%;
}

.k2_12 {
    border-radius: 50px;
}

/* تحسين حجم النصوص */
.k2_13 {
    font-size: 40px;
    position: absolute;
    margin-top: -85px;
    margin-right: 60px;
    transition: transform 0.3s ease-in-out;
}

.k2_13:hover {
    transform: scale(1.05);
}

/* تحسين الصور */
.k2_14 {
    width: 90px;
    height: 90px;
    margin-top: 15px;
    margin-left: -25px;
    border-radius: 10px;
}

/* تحسين التباعد الداخلي */
.ketoXxX {
    padding-top: 3%;
    padding-right: 35%;
}

/* تحسين الهوامش الخارجية */
.k2_19 {
    margin-right: 6%;
    margin-left: 6%;
}

/* تنسيق صندوق إدخال البيانات */
.k2user-box {
    position: relative;
}

/* تحسين حقول الإدخال */
.k2user-box input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #000;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
    transition: border-bottom 0.3s ease-in-out;
}

.k2user-box input:focus {
    border-bottom: 1px solid #000;
}

/* تحسين تنسيق الملصقات */
.k2user-box label {
    position: absolute;
    top: -1px;
    left: 90%;
    padding: 5px 0;
    font-size: 15px;
    color: #545454;
    pointer-events: none;
    transition: .2s;
}

/* تأثير عند الكتابة */
.k2user-box input:focus ~ label,
.k2user-box input:valid ~ label {
    top: -14px;
    left: 91%;
    color: #000;
    font-size: 13px;
}

/* تحسين تنظيم العناصر */
.K2_AaA {
    display: flex;
    justify-content: space-between;
    width: 95%;
}