html {
    direction: rtl;
    background-color: #FFF; /* لون الخلفية العام بالأبيض */
    color: #3D3D3D; /* لون النص الأساسي بالرمادي الغامق */
}

#events h3 {
    color: #FF0000; /* اللون الأحمر للعناوين */
}

#events p.duration, #events div.duration {
    color: #3D3D3D; /* لون النص لمدة الحدث */
}

#events p.description, #events div.description {
    color: #595959; /* لون النص لوصف الحدث */
}

#events .selectedEvent {
    background-color: #EFEFEF; /* لون خلفية الحدث المحدد */
}

#events input.reserve_time_btn {
    background-color: #FF0000; /* لون خلفية زر الحجز */
    color: #FFFFFF; /* لون النص داخل زر الحجز */
}

#events input.select_another_btn {
    background-color: #BBBBBB; /* لون خلفية زر اختيار موعد آخر */
    color: #FFFFFF; /* لون النص داخل زر اختيار موعد آخر */
}

#eventForm #start_date-block-container h3, #eventForm #timeline-container h3 {
    color: #FF0000; /* لون النص لعناوين نموذج الحجز */
}

#eventForm #save_button {
    background-color: #FF0000; /* لون خلفية زر الحفظ */
    color: #FFFFFF; /* لون النص لزر الحفظ */
}

div.ui-widget-content {
    background-color: #EFEFEF; /* لون خلفية العناصر القابلة للتفاعل */
}

div.ui-widget-header {
    background-color: #FF0000; /* لون خلفية رؤوس العناصر القابلة للتفاعل */
    color: #FFFFFF; /* لون النص لرؤوس العناصر القابلة للتفاعل */
}

#timeline-container table.timeline {
    color: #3D3D3D; /* لون النص للجدول الزمني */
}

.timeline td.not_worked_time {
    background-color: #BBBBBB; /* لون خلفية الأوقات التي لا يتم العمل بها */
}

.timeline td.free_time {
    background-color: # ​``【oaicite:0】``​