/*
🟡 How To Opend css elements in HTML on print Mode
---------------------------------------------
hatdos 3ala Ctrl + Shift + P  we hatktep fe el search
  "emulate css print media type"  we hatdos 3aleha 
 Cancel ? 
 ctrl + shift + p   >> "do not emulate css media type" 
*/

/* ================= LIGHT MODE ================= */
:root {
  /** backgrounds */
  --bg_navbar: rgb(248, 249, 250);
  --bg_sidebar: rgb(248, 249, 250);
  --bg_white_backcolor: rgb(250, 251, 252);
  --bg_content_space: rgb(243, 245, 247);

  /** fonts */
  --font_style: normal;
  --font_variant: normal;
  --font_weight: 400;

  --font_size_normal: 1.3rem;
  --line_height_normal: 1.4rem;

  /* --font_family_normal: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif; */
  --font_family_normal: 'Cairo', Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;


  --Font_Color: rgb(55, 65, 75);
  --Font_Color_Shadow: rgba(55, 65, 75, 0.2);
  --font_link_number_color: rgb(37, 99, 235);
  --special_font_color: rgb(30, 64, 175);
  --red_color: rgb(220, 38, 38);

  /** icons */
  --icon_btn_color: rgb(55, 65, 81);

  /** h2 */
  --h2_color: rgb(15, 118, 110);
  --h2_background_color: inherit;
  --h2_box_shadow: none;
  --h2_border_bottom: 0.15rem solid rgb(196, 200, 208); /* أعطى فرق واضح مع الـ background */

  /** buttons */
  --back_icon_color: rgb(59, 130, 246);
  --back_icon_hover: 0.85;

  --btn_new_backcolor: rgb(37, 99, 235);
  --btn_save_backcolor: rgb(16, 185, 129);
  --btn_update_backcolor: rgb(249, 115, 22);
  --btn_delete_backcolor: rgb(239, 68, 68);
  --btn_teal_backcolor: rgb(20, 184, 166);
  --btn_color: rgb(255, 255, 255);

  --btn_search_backcolor: rgb(238, 240, 242);
  --btn_search_color: rgb(55, 65, 81);

  --btn_hover_opacity: 0.9;

  /** inputs */
  --input_text_background_color: rgb(250, 251, 252);

  /** borders */
  --border_normal: 0.15rem solid rgb(196, 200, 208); /* أعطى فرق واضح مع الـ background */
  --border_normal_hover: 0.1rem solid rgb(59, 130, 246);
  --box_shadow_border:
    inset 0 0.1rem 0.1rem rgb(0 0 0 / 6%),
    0 0 0.6rem rgba(59, 130, 246, 0.25);

  --input_error_border: 0.1rem solid var(--red_color) !important;
  --box_shadow_border_hover:
    inset 0 0.1rem 0.1rem rgb(0 0 0 / 6%),
    0 0 0.6rem rgba(220, 38, 38, 0.35) !important;

  /** hover */
  --hover_btn_color: rgb(227, 229, 233);

  /** tables */
  --table_border: 0.1rem solid rgb(228, 231, 236);
  --table_header_background_color: rgb(245, 247, 249);
  --table_header_color: rgb(31, 41, 55);

  /** scroll */
  --scroll_track_color: rgb(245, 247, 249);
  --scroll_track_thumb: rgb(180, 185, 195);
  --scroll_track_thumb_hover: rgb(160, 165, 175);

  /** rows */
  --table_row_main_background_color: rgb(250, 251, 252);
  --table_row_main_color: rgb(31, 41, 55);
  --table_row_main_background_color_while_hover: rgb(236, 238, 241);
  --table_row_main_color_while_hover: rgb(31, 41, 55);

  --table_row_alternative_background_color: rgb(245, 247, 249);
  --table_row_alternative_color: rgb(31, 41, 55);
  --table_row_alternative_background_color_while_hover: rgb(236, 238, 241);
  --table_row_alternative_color_while_hover: rgb(31, 41, 55);

  --table_footer_row_background_color: rgb(240, 242, 245);
  --table_footer_row_color: rgb(55, 65, 81);

  --table_footer_show_data_background_color: rgb(243, 245, 248);
  --table_footer_show_data_color: rgb(75, 85, 99);

  /** misc */
  --input_height: 3rem;
  --transition: background-color 0.35s ease, color 0.35s ease,
    box-shadow 0.35s ease, border 0.35s ease, opacity 0.35s ease,
    transform 0.35s ease;

  --header_element_height: 6rem;
  --reports_not_final_account_color: rgb(75, 80, 95);
  --filled_table_barcode_span_color: rgb(14, 165, 233);
}

/* ================= DARK MODE ================= */
.dark {
  /** backgrounds */
  --bg_navbar: rgb(24, 26, 31);
  --bg_sidebar: rgb(24, 26, 31);
  --bg_white_backcolor: rgb(30, 33, 39);
  --bg_content_space: rgb(28, 30, 36);

  /** fonts */
  --Font_Color: rgb(209, 213, 219);
  --Font_Color_Shadow: rgba(209, 213, 219, 0.25);
  --font_link_number_color: rgb(96, 165, 250);
  --special_font_color: rgb(147, 197, 253);
  --red_color: rgb(248, 113, 113);

  /** icons */
  --icon_btn_color: rgb(229, 231, 235);

  /** h2 */
  --h2_color: rgb(15, 180, 180);   /* واضح في الدارك مود */
  --h2_background_color: inherit;
  --h2_box_shadow: none;
  --h2_border_bottom: 0.1rem solid rgb(75, 85, 99);

  /** buttons */
  --back_icon_color: rgb(96, 165, 250);
  --btn_search_backcolor: rgb(45, 48, 56);
  --btn_search_color: rgb(229, 231, 235);

  /** inputs */
  --input_text_background_color: rgb(30, 33, 39);

  /** borders */
  --border_normal: 0.1rem solid rgb(55, 65, 81);
  --border_normal_hover: 0.1rem solid rgb(96, 165, 250);
  --hover_btn_color: rgb(45, 48, 56);

  /** tables */
  --table_border: 0.1rem solid rgb(55, 65, 81);
  --table_header_background_color: rgb(28, 30, 36);
  --table_header_color: rgb(229, 231, 235);

  /** scroll */
  --scroll_track_color: rgb(30, 33, 39);
  --scroll_track_thumb: rgb(75, 85, 99);
  --scroll_track_thumb_hover: rgb(107, 114, 128);

  /** rows */
  --table_row_main_background_color: rgb(30, 33, 39);
  --table_row_main_color: rgb(229, 231, 235);
  --table_row_main_background_color_while_hover: rgb(45, 48, 56);
  --table_row_main_color_while_hover: rgb(229, 231, 235);

  --table_row_alternative_background_color: rgb(35, 38, 45);
  --table_row_alternative_color: rgb(229, 231, 235);
  --table_row_alternative_background_color_while_hover: rgb(45, 48, 56);
  --table_row_alternative_color_while_hover: rgb(229, 231, 235);

  --table_footer_row_background_color: rgb(42, 45, 52);
  --table_footer_row_color: rgb(209, 213, 219);

  --table_footer_show_data_background_color: rgb(38, 42, 50);
  --table_footer_show_data_color: rgb(180, 190, 200);

  /** misc */
  --reports_not_final_account_color: rgb(125, 132, 145);

  --filled_table_barcode_span_color: rgb(34, 211, 238);
}


/* END - dark mode -------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  text-decoration: none;
  outline: 0;
}

html {
  font-size: 62.5%;
  /* font-size: 61.5%; */
}

body {
  display: flex;
  flex-direction: column;
  font-style: var(--font_style);
  font-variant: var(--font_variant);
  font-weight: var(--font_weight);
  font-size: var(--font_size_normal);
  font-family: var(--font_family_normal);
  line-height: var(--line_height_normal);
  border: none;
/* الارتفاع */
height: 100vh;   /* للمتصفحات القديمة - ممكن يسبب مشاكل على الموبايل مع الـ address bar */
height: 100dvh;  /* للمتصفحات الحديثة - ارتفاع ديناميكي صح حسب الـ viewport */
  /* مهم جدا لضمان ان يكون الاسكرول بار فقط فى ال بودى */
  /* overflow: auto; */
  background-color: var(--bg_white_backcolor);
}


textarea,
input,
select,
button,
option,
optgroup,
legend {
  font-size: var(--font_size_normal);
  font-family: var(--font_family_normal);
}

button{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}

  .show_on_print_only {
    display: none !important;
  }
  

@media print {

  /* إعداد الصفحة */
  @page {
    size: A4 portrait; /* اتجاه عامودى */
    /* margin: top right bottom left !important; */
    margin: 0.5cm 1.1cm 1.1cm 1.1cm !important;
  }

  html {
    font-size: 70%;
  }
  body {
  font-style: var(--font_style);
  font-variant: var(--font_variant);
  font-weight: var(--font_weight);
  /* font-size: var(--font_size_normal); */
  font-family: var(--font_family_normal);
  line-height: var(--line_height_normal);
    /* direction: rtl; */
    text-align: right;
    /* font-size: 1.3rem;  */
    line-height: 1.6;
    color: #000;
    background: white;
    margin: 0;
    padding: 0;
  }
  /* منع التمرير وإخفاء الفواصل */
  html, body {
    overflow: visible !important;
    height: auto !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    background: none !important;
    filter: none !important;
    text-shadow: none !important;
    background-color: white !important;
  }

  i{
    display: none !important;
  }

  textarea {
    resize: none !important;
  }
  .hide_print {
    display: none !important;
  }

  .show_on_print_only {
    display: flex !important;
  }

  .print_width_100{
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .print_width_auto{
    min-width: auto !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .break_words_in_print {
    min-width: 11rem !important;     /* ✅ الحد الأدنى للعرض */
    max-width: 11rem !important;     /* الحد الأقصى */
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important; 
    overflow-wrap: break-word !important;
  }
  
  .break_words_in_print_with_large_width {
    min-width: 17rem !important;     /* ✅ الحد الأدنى للعرض */
    width: fit-content !important;
    max-width: 17rem !important;     /* الحد الأقصى */
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important; 
    overflow-wrap: break-word !important;
  }

  .print_width_fit_content{
    min-width: fit-content !important;
    width: fit-content !important;
    max-width: fit-content !important;
  }



  /* body * {
    color: #000 !important;
    background-color: white !important;
    border: none;
    overflow: visible;
    box-shadow: none !important;
    font-size: 1.3rem !important;
  } 
  */

  select {
    box-sizing: border-box !important;   /* علشان البوردر يدخل جوه العرض */
    -webkit-appearance: none !important; /* لأجل متصفحات كروم وسفاري */
    -moz-appearance: none !important; /* لأجل متصفح فايرفوكس */
    appearance: none !important; /* لأجل المتصفحات الحديثة */
    background: url("") no-repeat right center !important; /* إخفاء السهم */
    padding-inline-end: 1rem !important; /* إضافة مسافة لتجنب التداخل بين النص والسهم المخفي */
  }

  i {
    display: none !important;
  }

  input,
  span,
  textarea,
  select,
  label {
    border: none !important;
    outline: none !important;
    color: #000 !important;
    background-color: white !important;
    
  }

  label {
    margin-block-start: 10px !important; /* px*/
  }
  textarea {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
  }
}

p{
  
  line-height: 1.6;
}
#body_content {
  display: flex;
  flex-direction: column;
  position: relative;

  /*width: 100vw;*/   /* fallback للمتصفحات القديمة */
  /*width: 100dvw;*/  /* للمتصفحات الحديثة */
  /*height: 100vh;*/   /* fallback للمتصفحات القديمة */
  /*height: 100dvh;*/  /* للمتصفحات الحديثة */

  width: 100%; /* low feh moshkela e7zefo we erga3 le el vw and dvw  sawa */
  height: 100%; /* low feh moshkela e7zefo we erga3 le el vh and dvh  sawa */
  /* margin: 0; padding: 0; outline: none; border: none; box-sizing: border-box; */
  background-color: var(--bg_white_backcolor);
}

@media print {
  #body_content {
    position: relative;
    height: auto; /* إلغاء الارتفاع الثابت للطباعة */
    width: 100%;
    border: none;
  }
}

/* containers */
.flex_row {
  display: flex;
  flex-direction: row;
}
@media screen and (max-width: 750px) { /*! Don\t change px to rem never*/
  .flex_row {
    width: 100% !important;
  }
}

.flex_column {
  display: flex;
  flex-direction: column !important;
}

#contract_div_container{
position: relative;
display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-inline-start: 3rem;
  padding-inline-end: 3rem;
}

#contract_div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #fff3cd; /* أصفر فاتح مريح للعين */
  color: #856404; /* بني مائل للبرتقالي (لون التحذير الكلاسيكي) */
  text-align: center;
  padding: 0.5rem;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 0.3rem;
  border: var(--border_normal);
  box-shadow: 0 0 0.5rem var(--icon_btn_color);
  /* opacity: 0.8; */
  transition: var(--transition);
}

#scrollToTopBtn {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* bottom: 2rem; */
  inset-block-end: 1.5rem;
  /* inset-inline-end: 2rem; */
  inset-inline-end: 1.5rem;
  display: none;
  /* background-color: #007bff; */
  background-color: var(--btn_teal_backcolor);
  color: white;
  border: none;
  border-radius: 50%;
  /* width: 5rem; */
  width: 4rem;
  /* height: 5rem; */
  height: 4rem;
  /* font-size: 2.4rem; */
  font-size: 2.1rem;
  cursor: pointer;
  z-index: 1000;
  opacity: 1;
  /* الشفافيه */
  transition: var(--transition);
}

#scrollToTopBtn:hover {
  opacity: 0.8;
  
}


.scrollToTopBtn_onSHow{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
}

@media print {
  #scrollToTopBtn {
    display: none !important;
  }
}

/* ================= Chrome, Edge, Safari ================= */
.scroll {
  transition: var(--transition);
}

.scroll::-webkit-scrollbar {
  width: 0.8rem;
  height: 0.8rem;
  writing-mode: vertical-lr; /* تغيير اتجاه شريط التمرير */
}

.scroll::-webkit-scrollbar-track {
  background: var(--scroll_track_bg);
}

.scroll::-webkit-scrollbar-thumb {
  background: var(--scroll_track_thumb);
  border-radius: 2.5rem;
}

.scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll_track_thumb_hover);
}

/* ================= Firefox Only ================= */
@-moz-document url-prefix() {
  .scroll {
    scrollbar-width: thin; /* نحيف */
    scrollbar-color: var(--scroll_track_thumb) var(--scroll_track_bg);
  }
}

/** loading*/

.loading_icon_content_space::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 50%;
  transform: translate(-50%, -50%);
  content: "\f110"; /* رمز دوران Font Awesome */
  font-family: "Font Awesome 6 pro";
  font-weight: 900;
  animation: spin 1s linear infinite;
  font-size: 2rem;
  color: var(--Font_Color); /* لون الأيقونة - يمكنك تغييره إلى أي لون تريده */
}

/* عندما يكون الزر في حالة التحميل */
.loading_icon_btns::after {
  /* position: relative;
  z-index: 999; */
  content: "\f110"; /* رمز دوران Font Awesome */
  font-family: "Font Awesome 6 pro";
  font-weight: 900;
  margin-inline-start: 0.8rem; /* المسافة بين الأيقونة والعنصر */
  animation: spin 1s linear infinite;
  color: var(--btn_color); /* لون الأيقونة - يمكنك تغييره إلى أي لون تريده */
}

/* الرسوم المتحركة لدوران الأيقونة */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/** end - loading ------------------------------------------------*/

.back_icon {
  position: relative;
  inset-inline-start: 0;
  margin-inline-end: 1rem;
  font-size: 1.7rem !important;
  cursor: pointer;
  color: var(--back_icon_color);
  transition: var(--transition);
}

.forward_icon {
  position: absolute;
  inset-inline-end: 0;
  cursor: pointer;
  color: var(--back_icon_color);
  transition: var(--transition);
}

.back_icon:hover,
.forward_icon:hover {
  opacity: var(--btn_hover_opacity);
}

i {
  color: var(--icon_btn_color);
  font-size: 1.3rem; 
  transition: var(--transition);
  /* opacity: 0.8; */
}

p,
label,
a {
  color: var(--Font_Color);
}



/* General And library*/

input[type="checkbox"] {
  border: var(--border_normal);
  cursor: pointer;
}

input[type="checkbox"]:hover {
  border: var(--border_normal_hover);
  background-color: var(--red_color);
}


.hover:focus {
  border: var(--border_normal_hover);
  outline: 0;
  box-shadow: var(--box_shadow_border);
}

.hover_block_end:hover {
  border-block-end: var(--border_normal_hover);
  outline: 0;
}

.hover_block_end:focus {
  border-block-end: var(--border_normal_hover);
  outline: 0;
  box-shadow: var(--box_shadow_border);
}

.hover_error:hover {
  border: var(--input_error_border) !important;
  outline: 0 !important;
}

.hover_error:focus {
  border: var(--input_error_border) !important;
  outline: 0 !important;
  box-shadow: var(--box_shadow_border_hover) !important;
}

/*todo Flex*/
.row {
  display: flex ;
  flex-direction: row ;
}
.row_R {
  display: flex !important;
  flex-direction: row-reverse !important;
}

.column {
  display: flex ;
  flex-direction: column ;
}

.column_R {
  display: flex !important;
  flex-direction: column-reverse !important;
}
.wrap {
  flex-wrap: wrap !important;
  white-space: wrap !important;
}
.nowrap {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
.x_center {
  justify-content: center !important;
}
.x_start {
  justify-content: start !important;
}
.x_end {
  justify-content: end !important;
}
.x-around {
  justify-content: space-around !important;
}
.x_between {
  justify-content: space-between !important;
}
.y_start {
  align-items: start !important;
}
.y_end {
  align-items: end !important;
}
.y_center {
  align-items: center !important;
}
.grow_1 {
  flex-grow: 1;
}
.grow_2 {
  flex-grow: 2;
}
.grow_3 {
  flex-grow: 3;
}
.grow_4 {
  flex-grow: 4;
}
.grow_5 {
  flex-grow: 5;
}
.grow_6 {
  flex-grow: 6;
}
.grow_7 {
  flex-grow: 7;
}
.grow_8 {
  flex-grow: 8;
}
.grow_9 {
  flex-grow: 9;
}
.grow_10 {
  flex-grow: 10;
}

/*! END - flex  */

/*todo @Media*/
@media screen and (max-width: 750px) { /*! Don\t change px to rem never*/
  .media_width_100 {
    width: 100% !important;
  }
}

/*! END - @Media  */

/** background*/
.inherit {
  background-color: inherit !important;
}

/** gap*/

.gap_05 {
  gap: 0.5rem !important;
}

.gap_10 {
  gap: 1rem !important;
}

.gap_15 {
  gap: 1.5rem !important;
}

.gap_20 {
  gap: 2rem !important;
}
/** width*/
.w_full {
  width: 100% !important;
}

.w_fit {
  width: fit-content !important;
}

/** hight*/
.h_full {
  height: 100% !important;
}

.h_input {
  height: var(--input_height) !important;
}

.h_fit {
  height: fit-content !important;
}
/* !end - width */

/** Margin*/
.m_0 {
  margin: 0 !important;
}

.m_05 {
  margin: 0.5rem !important;
}
.m_10 {
  margin: 1rem !important;
}
.m_15 {
  margin: 1.5rem !important;
}
.m_20 {
  margin: 2rem !important;
}
.ms_05 {
  margin-inline-start: 0.5rem !important;
}
.ms_10 {
  margin-inline-start: 1rem !important;
}
.ms_15 {
  margin-inline-start: 1.5rem !important;
}
.ms_20 {
  margin-inline-start: 2rem !important;
}
.ms_25 {
  margin-inline-start: 2.5rem !important;
}
.ms_30 {
  margin-inline-start: 3rem !important;
}
.ms_35 {
  margin-inline-start: 3.5rem !important;
}
.ms_40 {
  margin-inline-start: 4rem !important;
}
.me_05 {
  margin-inline-end: 0.5rem !important;
}
.me_10 {
  margin-inline-end: 1rem !important;
}
.me_15 {
  margin-inline-end: 1.5rem !important;
}
.me_20 {
  margin-inline-end: 2rem !important;
}
.mt_05 {
  margin-block-start: 0.5rem !important;
}
.mt_10 {
  margin-block-start: 1rem !important;
}
.mt_15 {
  margin-block-start: 1.5rem !important;
}
.mt_20 {
  margin-block-start: 2rem !important;
}
.mb_05 {
  margin-block-end: 0.5rem !important;
}
.mb_10 {
  margin-block-end: 1rem !important;
}
.mb_15 {
  margin-block-end: 1.5rem !important;
}
.mb_20 {
  margin-block-end: 2rem !important;
}

/*! end margin*/

/** padding*/
.p_0{
  padding: 0 !important;
}

.p_05 {
  padding: 0.5rem !important;
}
.p_1 {
  padding: 1rem !important;
}
.p_15 {
  padding: 1.5rem !important;
}
.p_20 {
  padding: 2rem !important;
}
.ps_05 {
  padding-inline-start: 0.5rem !important;
}
.ps_10 {
  padding-inline-start: 1rem !important;
}
.ps_15 {
  padding-inline-start: 1.5rem !important;
}
.ps_20 {
  padding-inline-start: 2rem !important;
}
.pe_05 {
  padding-inline-end: 0.5rem !important;
}
.pe_10 {
  padding-inline-end: 1rem !important;
}
.pe_15 {
  padding-inline-end: 1.5rem !important;
}
.pe_20 {
  padding-inline-end: 2rem !important;
}
.pt_05 {
  padding-block-start: 0.5rem !important;
}
.pt_10 {
  padding-block-start: 1rem !important;
}
.pt_15 {
  padding-block-start: 1.5rem !important;
}
.pt_20 {
  padding-block-start: 2rem !important;
}
.pb_05 {
  padding-block-end: 0.5rem !important;
}
.pb_10 {
  padding-block-end: 1rem !important;
}
.pb_15 {
  padding-block-end: 1.5rem !important;
}
.pb_20 {
  padding-block-end: 2rem !important;
}

/*! end margin*/

.hand{
  cursor: pointer;
}

/* ? start - H */

.h2_main_text_div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}

.h2_text_div {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  cursor: pointer;
  color: inherit;
  white-space: pre-line; /* hay7trm el lines */
  font-size: 1.7rem;
}

@media print {
  .h2_text_div {
    display: none !important;
  }
}

.sub_h2_header {
  padding-inline-start: 2rem;
  font-size: 1.4rem;
}

.h2 {
  /* line-height: 3.2rem; */
  line-height: 2.7rem;
  font-size: 1.7rem;
}

.h3 {
  line-height: 2.5rem;
  /* border-block-end: var(--h2_border_bottom); */
  font-size: 1.5rem;
}

.h2,
.h3 {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  background-color: var(--h2_background_color);
  padding-block-end: 1rem;
  margin-block-start: 1.5rem;
  margin-block-end: 1.5rem;
  /* padding-block-end */
  border-block-end: var(--h2_border_bottom);
  min-width: 30rem;
  width: fit-content;
  max-width: 100%;
  color: var(--h2_color);
  box-shadow: var(--h2_box_shadow);
  transition: var(--transition);
}

@media print {
  .h2,
  .h2 * {
    border: none !important;
    outline: none !important;
    font-size: 1.6rem !important;
  }

  .back_href {
    display: none;
  }
}

#page_content {
  display: flex;
  flex-direction: column;
  /* new */
  /* height: 100%;  ⛔ew3a t3mel de*/
}

@media print {
  #page_content {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    border: none !important;
    overflow: visible;
  }
}
/* ? end - H */

/* ! start -- Input-text*/

.input_with_icon_div {
  position: relative;
  display: flex;
  flex-direction: row;
  /*❌ margin-block-end: 1rem; */
  /* padding-block-start: 0.7rem; */
  /* padding-block-end: 1rem; */
  padding-block-end: 1rem;
  
  /* هياخد مارجن الالانبوت بدل الانبوت نفسه */
  border: none;
  height: fit-content;
  width: fit-content;
  justify-content: start;
  align-items: center;
}

@media screen and (max-width: 750px) { /*! Don\t change px to rem never*/
  .input_with_icon_div {
   /* margin: 0 !important; */
   /* margin-block-end: 1rem; */
   padding-block-end: 1rem;
  }

  .input_with_icon_div *{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    margin: 0;
    padding: 0;
  }
}
 

.input_with_icon_div i {
  position: absolute;
  inset-inline-end: 0.3rem;
  font-size: 1.5rem;
  pointer-events: none;
  /* هنا تجعل الصورة غير قابلة للاستجابة للنقرات */
  color: var(--icon_btn_color);
}

.input_number_cointainer {
  position: relative;
  display: flex;
  flex-direction: row;
  /* margin-block-end: 1rem;
  margin-inline-end: 3rem; */
  /* هياخد مارجن الالانبوت بدل الانبوت نفسه */
  border: none;
  height: auto;
  width: auto;
  align-items: center;
}

.input_number_cointainer input[type="number"] {
  display: block;
  color: var(--Font_Color);
  background-color: var(--input_text_background_color);
  border-radius: 0.3rem;
  border: var(--border_normal);
  border-inline-end: none;
  padding: 0.5rem;
  width: 7rem;
  /* flex-basis: 33%; */
  height: var(--input_height);
  transition: var(--transition);
  text-align: center;
}

.input_number_cointainer span {
  position: relative;
  display: flex;
  /* text-align: center; */
  align-items: center;
  width: fit-content;
  white-space: nowrap;
  padding: 0.7rem;
  background-color: var(--btn_search_backcolor);
  color: var(--Font_Color);
  border-radius: 0.3rem;
  border: var(--border_normal);
  border-inline-start: none;
  height: var(--input_height);
  transition: var(--transition);
}

.input_date {
  /* خلى بالك التحديث فى الطول والخط يستلزم تحديث فى بقى  الانبوتس  والعكس */
  display: block;
  border-radius: 0.3rem;
  border: var(--border_normal);
  padding-block-start: 0.5rem;
  padding-inline-end: 2rem;
  padding-block-end: 0.5rem;
  padding-inline-start: 0.5rem;
  width: 10.5rem;
  height: var(--input_height);
  transition: var(--transition);
  background-color: var(--input_text_background_color);
  color: var(--Font_Color);
}

.search_input {
  /* خلى بالك التحديث فى الطول والخط يستلزم تحديث فى بقى  الانبوتس  والعكس */
  display: block;
  color: var(--Font_Color);
  background-color: var(--input_text_background_color);
  border-radius: 0.3rem;
  border: var(--border_normal);
  padding-block-start: 0.7rem;
  padding-inline-end: 2.7rem;
  padding-block-end: 0.7rem;
  padding-inline-start: 0.7rem;
  /* width: 22rem; */
  width: 100%;
  height: var(--input_height);
  transition: var(--transition);
  text-align: start;
}

@media screen and (max-width: 750px) { /*! Don\t change px to rem never*/
  .search_input {
    width: 100%;
  }
}

.pass_input {
  /* خلى بالك التحديث فى الطول والخط يستلزم تحديث فى بقى  الانبوتس  والعكس */
  display: block;
  color: var(--Font_Color);
  background-color: var(--input_text_background_color);
  border-radius: 0.3rem;
  border: var(--border_normal);
  padding-block-start: 0.7rem;
  padding-inline-end: 2rem;
  padding-block-end: 0.7rem;
  padding-inline-start: 0.7rem;
  width: 22rem;
  height: var(--input_height);
  transition: var(--transition);
  text-align: start;
}

@media screen and (max-width: 750px) { /*! Don\t change px to rem never*/
  .pass_input {
    width: 100%;
  }
}

.currency_container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  gap: 1rem;
}

.currency_rate_div{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  width: fit-content;
  max-width: 100%;
  margin-block-start: 1rem;
  margin-block-end: 1rem;
}

.input_currency_rate {
  width: 11rem;
  max-width: 100%;
  position: relative;
  height: var(--input_height);
  border: var(--border_normal);
  border-radius: 0.3rem;
  transition: var(--transition);
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;
  /* margin-block-end: 1rem; */
  color: var(--Font_Color);
  background-color: var(--input_text_background_color);  
}

@media print{
  .input_currency_rate{
    background-color: white;
    color: black;
    width: fit-content;
    font-weight: bold;
    text-align: center;
  }
}

.input_text_sm {
  width: 11rem;
  max-width: 100%;
}

.input_text_md01{
  width: 14rem; /*⛔ mat8yrsh 14rem mazpot 3ashan el phone input*/
  max-width: 100%;
}

.input_text_md{
  width: 27rem;
  max-width: 100%;
}

.input_text_lg {
  width: 40rem;
  max-width: 100%;
}

.input_text_xl {
  width: 70%;
  max-width: 70rem;
}



@media print{
  .input_text_xl{
    font-weight: bold !important;
    margin-block-start: 1rem !important;
  }
}
.select_month {
  width: 5rem;
  max-width: 100%;
}

.select_year {
  width: 7rem;
  max-width: 100%;
}

.input_text_sm,
.input_text_md,
.input_text_md01,
.input_dialog_comment,
.input_text_lg,
.input_text_xl,
.select_month,
.select_year {
  position: relative;
  height: var(--input_height) !important;
  border: var(--border_normal);
  border-radius: 0.3rem;
  transition: var(--transition);
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;
  margin-block-end: 1rem;
  color: var(--Font_Color);
  background-color: var(--input_text_background_color);
}

.text_area1 {
  position: relative;
  border: var(--border_normal);
  border-radius: 0.3rem;
  transition: var(--transition);
  padding: 0.5rem;
  margin-block-end: 1rem;
  width: 100%;
  max-width: 40rem;
  height: 12rem;
  /* resize: none; */
  margin-block-end: 1rem;
  color: var(--Font_Color);
  background-color: var(--input_text_background_color);
}

.text_area2 {
  position: relative;
  border: var(--border_normal);
  border-radius: 0.3rem;
  transition: var(--transition);
  padding: 0.5rem;
  width: 30rem;
  max-width: 100%;
  height: 10rem;
  resize: none;
  margin-block-end: 1rem;
  color: var(--Font_Color);
  background-color: var(--input_text_background_color);
}

.barcode_icon {
  cursor: pointer;
  transition: var(--transition);
}

.barcode_icon::after {
  opacity: 0.9;
}


.input_dialog_comment {
  min-width: 27rem;
  width: 100%;
  max-width: 80vw;   /* fallback للمتصفحات القديمة */
  max-width: 80dvw;  /* للحديثة (صح من غير شريط تمرير) */
}
.input_error {
  border: var(--input_error_border) !important;
}

/* ! End - input-text*/

/* ^ Start -- Buttons*/

.btn_container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: fit-content;
  margin-block-end: 1.5rem;
}

.btn_container_top_border {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  line-height: 3.2rem;
  padding-block-start: 1.5rem;
  width: 100%;
  margin-block-start: 1rem;
  margin-block-end: 1rem;
  border-block-start: var(--h2_border_bottom);
}

.btn_container_bottom_border {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  line-height: 3.2rem;
  padding-block-end: 1.5rem;
  width: 100%;
  margin-block-start: 1rem;
  margin-block-end: 1rem;
  border-block-end: var(--h2_border_bottom);
}

@media print {
  .btn_container,
  .btn_container_top_border,
  .btn_container_bottom_border {
    display: none !important;
    border: none !important;
  }
}

.btn_container a,
.btn_container button,
.btn_container_top_border a,
.btn_container_top_border button,
.btn_container_bottom_border a,
.btn_container_bottom_border button {
  margin-inline-end: 1rem;
}

.btn_do {
  background-color: teal;
  /* background-color: #712cf9; */
}

.btn_save {
  background-color: var(--btn_save_backcolor);
}

.btn_new {
  background-color: var(--btn_new_backcolor);
}

.btn_update {
  background-color: var(--btn_update_backcolor);
}

.btn_cancel {
  background-color: var(--btn_delete_backcolor);
}

.btn_teal {
  background-color: var(--btn_teal_backcolor);
}


.btn_do,
.btn_save,
.btn_new,
.btn_update,
.btn_cancel,
.btn_teal {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: var(--btn_color);
  width: fit-content;
  /* min-width: 6.5rem; */
  min-width: 6rem;
  /* height: 3.2rem; */
  height: 3rem;
  padding: 1rem;
  border: none;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
  border-radius: 0.3rem;
  transition: var(--transition);
}

.btn_do:hover,
.btn_save:hover,
.btn_new:hover,
.btn_update:hover,
.btn_cancel:hover,
.btn_search:hover,
.btn_upload_attachment:hover,
.btn_teal:hover {
  opacity: var(--btn_hover_opacity);
}

.btn_do:active,
.btn_save:active,
.btn_new:active,
.btn_update:active,
.btn_cancel:active,
.btn_search:active,
.btn_upload_attachment:active,
.btn_teal:active {
  transform: scale(1.1); /* زيادة حجم العنصر بنسبة 10% */
}

/* ^ End -- Buttons*/

/*! start - Label*/

.nomal_p {
  font-size: var(--font_size_normal);
  color: var(--Font_Color);
  padding-block-end: 2rem;
}

@media print{
  .nomal_p{
    color: black !important;
    background-color: white !important;
    padding-block-end: 1rem;
  }
}
.lbl_sm {
  padding-block-end: 0.8rem;
  padding-block-start: 0.7rem;
}



.lbl_sm,
.lbl_sm_without_marging {
  position: relative;
  display: inline-block;
  word-wrap: normal;
  /* التفاف النص  */
  display: block;
  font-weight: bold;
  width: fit-content;
  padding-inline-start: 0.5rem;
  line-height: 1.6rem;
  color: var(--Font_Color);
  transition: var(--transition);
}

.serial_index {
  position: relative;
  display: inline-block;
  word-wrap: normal;
  /* التفاف النص  */
  display: block;
  font-weight: bold;
  min-width: 2.2rem;
  width: fit-content;
  text-align: end;
  /* padding-inline-start: 0.5rem; */
  line-height: 1.6rem;
  color: var(--Font_Color);
  transition: var(--transition);
}

/*! end - Label*/

/*! permesions*/

.lbl_permissions {
  position: relative;
  display: inline-block;
  word-wrap: normal;
  /* التفاف النص  */
  display: block;
  font-size: 1.3rem; /*estptal 1.4rem*/
  font-weight: bold;
  color: var(--Font_Color);
  transition: var(--transition);
  white-space: nowrap;
}

.permission_select {
  width: 25rem;
  height: var(--input_height);
  color: var(--Font_Color);
  background-color: var(--input_text_background_color);
  font-size: 1.3rem; /*estptal 1.4rem*/
  padding: 0.6rem;
  transition: var(--transition);
  border: var(--border_normal);
  text-align: start;
}

@media screen and (max-width: 750px) { /*! Don\t change px to rem never*/
  .permission_select {
    width: 100%;
  }
}

@media print{
  .lbl_sm,
  .lbl_sm_without_marging,
  .lbl_permissions,
  .serial_index,
  .permission_select{
    color: black !important;
    background-color: white !important;
  }
}
/* Page Login=================================== */


.shining-text {
  font-size: 2.5rem;
  font-weight: bold;
  color: #003366; /* لون أزرق داكن */
  color: teal; /* لون أزرق داكن */
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  padding: 1rem 2rem; /* مسافة حول النص لتجنب القص */
}

.shining-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: shine 3s infinite linear;
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

@keyframes glow {
  0% {
      box-shadow: 0 0 0.5rem rgba(255, 165, 0, 0.5);
      transform: scale(1);
  }
  100% {
      box-shadow: 0 0 2rem rgba(255, 165, 0, 1);
      /* transform: scale(1.05); */
      transform: scale(1.1);
  }
}
.loginHeaderx{
  position: relative;
  display: flex;
  margin: 0;
  padding: 1rem;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 100%;
  /* overflow: hidden; */
}

.divider {
  width: 10rem;
  height: 0.4rem;
  background: orange;
  
  margin: 0 auto 3rem;
  margin-block-start: 1rem;
  /* جعل الحواف بيضاوية */
  border-radius: 1rem;

  /* إضافة تأثير التوهج */
  box-shadow: 0 0 1rem rgba(255, 165, 0, 0.8);
  
  /* تأثير متحرك */
  animation: glow 1.5s infinite alternate ease-in-out;
  z-index: 2;
}


.login_divider {
  width: 10rem;
  height: 0.4rem;
  background: orange;
  
  margin-block-start: 1rem;
  margin-block-end: 2rem;
  margin-inline-start: 0rem;
  margin-inline-end: 0rem;
  /* جعل الحواف بيضاوية */
  border-radius: 1rem;

  /* إضافة تأثير التوهج */
  box-shadow: 0 0 1rem rgba(255, 165, 0, 0.8);
  
  /* تأثير متحرك */
  animation: glow 1.5s infinite alternate ease-in-out;
  z-index: 2;
}


.login_div {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 45rem;
  height: 45rem;
  border-radius: 0.5rem;
  padding-block-start: 0.5rem;
  padding-block-end: 4rem;
  padding-inline-start: 4rem;
  padding-inline-end: 4rem;
  box-shadow: 0 0 2.5rem var(--icon_btn_color);
  background-color: rgb(250, 250, 250);
  margin: auto;
}

@media screen and (max-width: 750px) { /*! Don\t change px to rem never*/
  .login_div {
    width: 90%;
    height: 45rem;
  }
}

.login_word {
  position: relative;
  font-size: 2.5rem;
  color: teal;
  margin-block-start: 3rem;
  margin-block-end: 4rem;
}

.login_text {
  background-color: #123;
  width: 100%;
  display: block;
  box-sizing: border-box;
  margin: 0 auto;
  margin-block-start: 6rem;
}

.login_textbox {
  border-radius: 0.3rem;
  border: var(--border_normal);
  box-sizing: border-box;
  display: block;
  margin-block-end: 3rem;
  align-items: center;
  height: 3.5rem;
  width: 100%;
  padding-block-start: 0;
  padding-inline-start: 1rem;
  padding-block-end: 0;
  padding-inline-end: 1rem;
  background-color: aliceblue;
  font-size: 1.7rem;
  color: royalblue;
  transition: 0.5s;
}

.wrong_username {
  position: relative;
  align-items: center;
  margin-block-start: 3rem;
  text-align: center;
  white-space: nowrap;
  display: block;
  color: var(--red_color);
  font-size: 1.6rem;
  overflow-x: hidden;
}

.number_input {
  border-radius: 0.3rem;
  border: var(--border_normal);
  box-sizing: border-box;
  display: block;
  margin: 2.5rem auto;
  align-items: center;
  text-align: center;
  height: 7rem;
  width: 8rem;
  padding-block-start: 0;
  padding-inline-start: 1rem;
  padding-block-end: 0;
  padding-inline-end: 1rem;
  color: rgb(27, 27, 27);
  background-color: aliceblue;
  font-size: 1.7rem;
  font-weight: bold;
  transition: 0.5s;
}

.number_inpu_arrows {
  cursor: pointer;
  align-items: center;
  text-align: center;
  line-height: 1;
  /* زيادة الارتفاع الرأسي لتوسيط السهم */
  width: 3rem;
  color: rgb(42, 42, 42);
  font-size: 3rem;
  transition: transform 0.2s;
}

.number_inpu_arrows:active {
  cursor: pointer;
  color: white;
  background-color: royalblue;
}

/* End Login=================================================== */

/* start header======================================= */
.header {
  position: sticky;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  padding-block-start: 0;
  padding-inline-start: 0.5rem;
  padding-block-end: 0;
  padding-inline-end: 1rem;
  height: fit-content; /* da lazem yb2a auto 3ahan low rl 3naser keter we el wrap esh8al yb2a el height tamam */
  width: 100%;
  /* background-image: linear-gradient(rgb(255,255,255),rgb(245,245,245)); */
  background-color: var(--bg_navbar);
  box-shadow: 0 0 0.5rem var(--icon_btn_color);
  transition: var(--transition);
  z-index: 100;
  overflow-wrap: break-word;
  /* تجاوز السطر في حال كان النص طويلاً */
  word-wrap: break-word;
  word-break: break-word;
}

@media print {
  .header {
    display: none;
  }
}
.header_dark_lang_control {
  position: relative;
  display: flex;
  flex-direction: column;
  display: block;
  align-items: center;
  justify-content: center;
  background-color: var(--hover_btn_color);
  transition: var(--transition);
  margin-inline-start: 0.5rem;
  margin-inline-end: 0.5rem;
  height: var(
    --header_element_height
  ); /* all header elements must take this value */
}

@media print {
  .header_dark_lang_control {
    display: none;
  }
}

.header_dark_lang_control a {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 3rem;
  padding-inline-start: 0.8rem;
  padding-inline-end: 0.8rem;
  align-items: center;
  text-align: center;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
  cursor: pointer;
  transition: var(--transition);
}

.header_menue {
  display: flex;
  flex-direction: row;
  /* flex-grow: 1; */
  flex-wrap: nowrap;
  transition: var(--transition);
}

@media print {
  .header_menue {
    display: none;
  }
}


.header_user_div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  /* width: auto; */
   flex-grow: 1;
  flex-wrap: nowrap;
  transition: var(--transition);
  height: var(
    --header_element_height
  ); /* all header elements must take this value */
}

@media print {
  .header_user_div {
    justify-content: start;
    align-items: end;
    width: 100%;
  }

  #header_user_today {
    display: block !important;
    font-size: 2rem;
  }

  #page_header_on_print {
    display: block !important;
    font-size: 3rem !important;
  }


  #header_user_name {
    display: none;
  }

  #header_company_name {
    display: block;
    font-size: 2rem !important;
  }
}

.header_user_name {
  position: relative;
  font-weight: bold;
  cursor: pointer;
  background-color: inherit;
  color: var(--Font_Color);
  transition: var(--transition);
}

.user_options {
  position: fixed;
  inset-block-start: 5.5rem;
  inset-inline-end: 0.7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  white-space: nowrap;
  flex-wrap: nowrap;
  gap: 1rem;
  background-color: var(--bg_white_backcolor);
  border: var(--border_normal);
  border-radius: 1rem;
  width: fit-content;
  max-width: 100%;

  height: fit-content;
  max-height: 100%; /* ارتفاع ابتدائي */

  padding: 0.7rem;

  opacity: 1;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out,
    background-color 0.5s ease 0s, color 0.5s ease 0s, box-shadow 0.5s ease 0s,
    border 0.5s ease 0s, opacity 0.7s ease, transform 0.5s ease;
  overflow: hidden;
}

.user_options button {
  width: 100%;
}


#notifications_btn {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.notfy_header_icon{
  position: relative;
  font-size: 1.7rem;
  padding: 1rem;
}
.notifications_settings_div {
position: absolute;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
gap: 1rem;
border: var(--border_normal);
background-color: var(--bg_white_backcolor);
padding: 1rem;
width: fit-content;
height: fit-content;
inset-inline-end: 1rem;
inset-block-start: 4rem;
transition: var(--transition);
}


.notifications_row_settings_div {
position: absolute;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
gap: 1rem;
border: var(--border_normal) !important;
background-color: var(--bg_white_backcolor);
padding: 1rem;
width: fit-content;
height: fit-content;
inset-inline-end: 1rem;
inset-block-start: -2.5rem;
transition: var(--transition);
}

.notifications_div {
  position: fixed;
  inset-block-start: 5.5rem;
  inset-inline-start: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  white-space: nowrap;
  flex-wrap: nowrap;
  /* gap: 1rem; */
  background-color: var(--bg_white_backcolor);
  border: var(--border_normal);
  padding: 0.7rem;
  border-radius: 1rem;
  width: 33.3rem;
  max-width: 100%;
  height: fit-content;
  max-height: 40rem;
  /* ظل هادى */
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.15);  */

  /* ظل قوى */
  box-shadow: 0 6px 20px rgba(0,0,0,0.25); 

  overflow-y: auto;
  overflow-x: hidden;
  opacity: 1;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out,
    background-color 0.5s ease 0s, color 0.5s ease 0s, box-shadow 0.5s ease 0s,
    border 0.5s ease 0s, opacity 0.7s ease, transform 0.5s ease;
}



.header_menue a,
.header_menue div,
#notifications_btn,
.header_menue button {
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  height: var(
    --header_element_height
  ); /* all header elements must take this value */
  padding-block-start: 0;
  padding-inline-start: 1rem;
  padding-block-end: 0;
  padding-inline-end: 1rem;
  /* border: solid blue 0.1rem; */
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}

.header a:hover,
#notifications_btn:hover {
  box-sizing: border-box;
  background-color: var(--hover_btn_color);
}

/* End# Header=========================================== */

/* start main============================================== */

/* start container ----------------------------------- */

/* start sub_header--------------------------- */

/* end# .sub_header */

/* start sub_container======================== */

.sub_container {
  position: relative;
  display: flex;
  flex-direction: row;
  /* flex-wrap: nowrap; */
  flex-grow: 1;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg_white_backcolor);
  transition: var(--transition);
  /* مهم جدا لضمان ان يكون الاسكرول بار فقط فى ال بودى */
}

@media print {
  .sub_container {
    position: relative !important; /* إلغاء التأثيرات المتعلقة بالموضع */
    width: 100% !important; /* التأكد من أن العرض يتكيف مع المحتوى */
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    background: none !important;
    filter: none !important;
    text-shadow: none !important;
    background-color: white !important;
  }

  .sub_container * {
    overflow: visible; /* إلغاء التمرير المخفي في جميع العناصر */
  }
}

/* end# sub_container============================ */

/*! start sidebar============================ */

/* تحديد المتغيرات بناءً على اتجاه الصفحة */
:root {
  /* افتراضياً يتم التحرك من اليسار إلى اليمين */
  --sidebar-translate-in: translateX(-100%);
  --sidebar-translate-out: translateX(0);
}

html[dir="rtl"] {
  /* في حالة الاتجاه من اليمين إلى اليسار، يتم التحرك من اليمين إلى اليسار */
  --sidebar-translate-in: translateX(100%);
  --sidebar-translate-out: translateX(0);
}

/* الرسوم المتحركة */
/* الرسوم المتحركة للشريط الجانبي */
@keyframes sidebarFadeIn {
  from {
    opacity: 0;
    /* استخدام المتغيرات المحددة */
    transform: var(--sidebar-translate-in);
  }
  to {
    opacity: 1;
    transform: var(--sidebar-translate-out);
  }
}

@keyframes sidebarFadeOut {
  from {
    opacity: 1;
    transform: var(--sidebar-translate-out);
  }
  to {
    opacity: 0;
    /* استخدام المتغيرات المحددة */
    transform: var(--sidebar-translate-in);
  }
}



.sidebar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  /* min-width: fit-content; */
  min-width: 18rem;
  width: fit-content;
  background-color: var(--bg_sidebar);
  padding: 0.5rem;
  padding-inline-end: 0.5rem;
  margin-inline-end: 0.5rem;
  height: 100%; /* تأكد من أن sidebar تملأ الحيز العمودي */
  overflow: auto;
  overflow-x: hidden;
  transition: var(--transition);
}

@media print {
  .sidebar {
    display: none;
  }
}
/* hide side_parent if screen < 750 */
@media screen and (max-width: 750px) { /*! Don\t change px to rem never*/
  .sidebar {
    display: none;
  }
}

/* تطبيق الرسوم المتحركة على الشريط الجانبي عند ظهوره واختفائه */
.sidebar_Media_Show {
  position: fixed;
  display: flex;
  flex-direction: column;
/* للمتصفحات القديمة */
height: calc(100vh - var(--header_element_height));

/* للمتصفحات الحديثة (ديناميكي وصحيح) */
height: calc(100dvh - var(--header_element_height));
  width: 70%;
  inset-inline-start: 0;
  overflow: auto;
  z-index: 10;
  transition: var(--transition);
  min-height: auto; /* مهم لإزالة الحد الأدنى من الارتفاع في الشريط الجانبي */
  border: var(--border_normal);
  /* تطبيق الرسوم المتحركة */
  animation-duration: 0.3s; /* يمكنك تغيير مدة الرسوم المتحركة حسب الحاجة */
  animation-fill-mode: forwards; /* يحافظ على الحالة النهائية للرسوم المتحركة */
}

/* تطبيق الرسوم المتحركة عند ظهور الشريط الجانبي */
.sidebar_Media_Show.show {
  animation-name: sidebarFadeIn;
}

/* تطبيق الرسوم المتحركة عند اختفاء الشريط الجانبي */
.sidebar_Media_Show.hide {
  animation-name: sidebarFadeOut;
}
.no_scroll {
  overflow: hidden;
}

.closeMenueIcon {
  display: none;
  position: absolute;
  height: 3rem;
  cursor: pointer;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin-block-end: 1rem;
  width: 3rem;
  inset-block-start: 1rem ;
  inset-inline-end: 1rem;
  transition: var(--transition);
  z-index: 3;
}

.closeMenueIcon:hover {
  opacity: 0.8;
}

@media screen and (max-width: 750px) { /*! Don\t change px to rem never*/
  .closeMenueIcon {
    display: flex;
    flex-direction: row;
  }

  .closeMenueIcon i {
    /* el X ely gowa hya shafafa fadya fabtgep el lon el 5alfya ely waraha */
    color: var(--btn_delete_backcolor);
    font-size: 3rem;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}

.logo {
  width: 4rem;
  height: 4rem;
  border-radius: 0.8rem;
  /* background: linear-gradient(135deg, #ff7a18,#ffb07a);
 
  background: linear-gradient(135deg, #bfbfbf, #d9d9d9, #f2f2f2, #ffffff);
  background: linear-gradient(135deg, #c0c0c0, #e0e0e0, #ffffff); 
  background: linear-gradient(135deg, #7a7a7a, #bfbfbf, #e6e6e6, #ffffff); */
   background: linear-gradient(135deg, #8c8c8c, #c0c0c0, #ffffff);
   

  

  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #072030;
}


.brand h1 {
  font-size: 1.6rem;
  margin: 0;
  color: var(--Font_Color);
  transition: var(--transition);
}

.small {
  font-size: 12px;
  color: #94a3b8;
}

.sidebar a,
.sidebar button {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: center;
  gap: 1.3rem;
  /******************/

  font-size: 1.4rem;
  min-width: fit-content;
  width: 100%;
  text-decoration: none;
  white-space: nowrap;
  padding-block-start: 1rem; /* خفض الارفاع والانكماش من هنا  */
  padding-block-end: 1.2rem;
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
  border-radius: 0.3rem;
  background-color: var(--bg_sidebar);
  color: var(--Font_Color);
  /* color: var(--font_link_number_color); */
  cursor: pointer;
  transition: var(--transition);
  /* border: 0.1rem solid rgb(230, 230, 230); */
}

.sidebar a:hover,
.sidebar button:hover,
.active_sidebar_element {
  box-sizing: border-box !important;
  background-color: var(--hover_btn_color) !important;
  border-inline-start: 0.5rem solid var(--borderColor_Hover) !important;
  color: var(--Font_Color) !important;
}



/* 
#Custmize_sidebar {
  margin-inline-start: 3rem;
  display: block;
  width: 100%;
  background-color: transparent;
  color: blue;
  margin-block-start: 2rem;
  text-align: center;
  transition: var(--transition);
} */

.sidebar-active {
  border-inline-start: 0.5rem solid #ff5722;
  color: white;
  background-color: #ff5722;
  transition: var(--transition);
}

.MenueIcon {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* توسيط العنصر في الاتجاه الرأسي */
  height: 6rem;
  /* margin: 0 1rem; */
  padding-block-start: 0;
  padding-inline-start: 1rem;
  padding-block-end: 0;
  padding-inline-end: 1rem;
  cursor: pointer;
  transition: var(--transition);
}
.MenueIcon i {
  font-size: 2rem;
}

.MenueIcon:hover {
  background-color: var(--hover_btn_color);
}

@media screen and (max-width: 750px) { /*! Don\t change px to rem never*/
  .MenueIcon {
    display: flex;
  }
}

/*! End# Sidbar=============================== */

/* start white_backcolor =========================== */
.white_backcolor {
  position: relative;
  display: flex;
  flex-direction: column;
  /* flex-wrap: nowrap; */
  flex-grow: 1;
  /* width: 100%; */
  background-color: var(--bg_white_backcolor);
  border-radius: 0.1rem;
  /* padding: 2rem; معلق تم الغاءه وهو مهم */
  transition: var(--transition);
  overflow: hidden;
  /* overflow: auto; */
  /* height: auto;
  min-height: 100%; */
  /* مهم جدا لضمان ان يكون الاسكرول بار فقط فى ال بودى */
}

@media screen and (max-width: 750px) { /*! Don\t change px to rem never*/
  .white_backcolor {
    padding: 0;
    
  }
}

@media print {
  .white_backcolor {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background-color: white !important;
  }
}
/* start localspace ====================== */
#content_space {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* box-sizing: border-box; */
  border-radius: 0.2rem;
  box-shadow: 0 0 0.1rem;
  height: 100%;
  width: 100%;
  /* مهم جدا لضمان ان يكون الاسكرول بار فقط فى ال بودى */
  /* width: 100%; */
  border: none;
  background-color: var(--bg_content_space);
  /* padding: 1.5rem; */
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
  padding-block-end: 1rem;
  /* overflow: auto; */
  box-shadow: none !important;
  overflow-y: auto; /* تأكد من وجود شريط التمرير العمودي */
  transition: var(--transition);
}

@media print {
  #content_space {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background-color: white !important;
    box-shadow: none !important;
  }
}
/* End# localspace================================ */

/* #end white_backcolor=========================== */

/* End# container ----------------------------------------- */

/* End# main ====================================================== */

/* start footer======================== */
.footer {
  border: solid blue 0.2rem;
  height: 5rem;
  margin: 0 auto;
  align-items: center;
  text-align: center;
  inset-block-end: 0;
}

/* End# footer============================ */

.test {
  flex-grow: 1;
  pointer-events: none;
  /* هنا تجعل الصورة غير قابلة للاستجابة للنقرات */
  align-items: baseline;
  align-items: center;
  /* فى النص */
  align-items: flex-start;
  /* بداية الشمال */
  align-items: flex-end;
  /* نهايه اليمين */
  align-items: stretch;
  /* تمديد */
}

/* -----------------------------------Pages------------------------------------- */

.pages_footer {
  display: flex;
}

.group_div_flex {
  display: flex;
  flex-wrap: wrap;
  /* عشان تنزل العناصر تحت بعض فى حال ان الشاشخ  */
  align-items: center;
  /* توسيط العمصر فى الاتجاه العمودى */
}

.flex_H {
  /* افقى */
  position: relative;
  display: flex;
  flex-direction: row;
  /* flex-wrap: wrap; عشان تنزل العناصر تحت بعض فى حال ان الشاشخ  */
  align-items: center;
  /* توسيط العمصر فى الاتجاه العمودى */
  /* padding: 0.5rem; */
  /* margin: 0.3rem; */
}

.flex_V {
  display: flex;
  flex-direction: column;
  /* flex-wrap: wrap; */
  /* padding: 0.5rem; */
}

.fill {
  flex: 1;
  /* يعطى العنصر كامل الحجم المتبقى من المساحه فى العنصر الاب  */
}

.group_div_block {
  padding: 0.5rem;
  /* margin: 0.7rem 0.5rem; */
  display: block;
  flex-wrap: wrap;
  /* overflow: hidden; */
}

.date_container {
  display: flex;
  flex-direction: row;
}

.date_box {
  display: block;
  border-radius: 0.3rem;
  border: var(--border_normal);
  padding: 0.5rem;
  width: 13rem;
  height: var(--input_height);
  transition: 0.2s ease;
  text-align: start;
}

.reference_and_date_div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: fit-content;
  height: fit-content;
  width: fit-content;
  max-width: 100%;
  gap: 1rem;
}

@media print {
  .reference_and_date_div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: start;
    width: 100%;
    gap: 0;
    margin: 0;
    padding: 0;
  }
  .reference_and_date_div *{
    margin: 0 !important;
  }
}

.reference_and_date_div .div1{
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: start;
  align-items: end;
  flex:1;
  gap: 1rem;
}


@media print {
  .reference_and_date_div .div1{
    display: flex !important;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    width: 100%;
  

  }
}
.reference_and_date_div .div2{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: fit-content;
  gap: 1rem;
}


@media print{
  .reference_and_date_div .div2{
    flex-direction: column !important;
    justify-content: start !important;
    align-items: end !important;
    width: fit-content !important;
    /* border: solid black 0.1rem !important; */
    padding: 0 !important;
    margin: 0 !important;
  }

  .div2_inside_element_on_print,
  .div2_inside_element_on_print label,
  .div2_inside_element_on_print input {
    display: flex !important;
    flex-direction: column !important;
    justify-content: start !important;
    align-items: end !important;
    text-align: end !important;
    margin: 0 !important;
    padding: 0 !important;
  }

}

.reports_not_final_account_color{
  color: var(--reports_not_final_account_color);
}

@media print{
  .company_logo_div {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    justify-content: start !important;
    align-items: end !important;
    width: 150px; /*! de lazem teb2a px */
    height: 150px; /*! de lazem teb2a px */
    inset-block-start: 10px; /*! de lazem teb2a px */  /* المسافة من فوق */
    inset-inline-end: 10px; /*! de lazem teb2a px */    /* المسافة من الجهة التانية */
    /* border: 0.1rem solid #ccc !important; */
    /* border: none; */
    overflow: hidden;
  }

  .company_logo_div img {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    /* border: 0.1rem solid #ccc !important; */
  }
}

.page_header_print{
  position: relative;
  display: none;
  font-size: 2.7rem !important;
  font-weight: bold;
  padding: 0;
  margin: 0;
  white-space: pre-line; /* احترام السطور وعدم الحترام المسافات */
}

@media print {
  .page_header_print{
    display: block !important;
    text-align: start;
    margin-bottom: 10px !important; /*! de lazem teb2a px */
    line-height: 40px !important; /*! de lazem teb2a px */

  }
}



@media print{
.div_text_print{
  position: relative;
  display: flex;flex-direction: row;
  justify-content: start;
  text-align: start;
  align-items: center;
  white-space: pre-wrap !important;   /* عشان السطور تنزل تحت بعض */
  word-break: break-word !important;  /* يكسر الكلمة لو طويلة */
  padding-inline-start: 1rem !important;
  width: 100% !important;
  height: fit-content !important;
}
}
.reference_text {
  display: block;
  border-radius: 0.3rem;
  border: var(--border_normal);
  padding: 0.5rem;
  width: 20rem;
  height: var(--input_height);
  transition: 0.2s ease;
  text-align: center;
}

.note_text {
  display: block;
  border-radius: 0.3rem;
  border: var(--border_normal);
  padding: 0.5rem;
  width: 25.5rem;
  height: 2.7rem;
  text-align: start;
  transition: 0.2s ease;
}

.reference_div_container {
  margin-inline-start: 1rem;
  display: block;
}

.reference_div_checkbox {
  display: flex;
  align-items: center;
}

.reference_div_checkbox span {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  align-items: center;
  padding-block-start: 0;
  padding-inline-start: 0.7rem;
  padding-block-end: 0;
  padding-inline-end: 0.7rem;
  border-radius: 0.3rem;
  overflow: hidden;
  height: var(--input_height);
  border: var(--border_normal);
}

.span {
  position: relative;
  display: flex;
  /* text-align: center; */
  align-items: center;
  width: fit-content;
  white-space: nowrap;
  padding: 0.5rem;
  background-color: var(--btn_search_backcolor);
  color: var(--Font_Color);
  border-radius: 0.3rem;
  border: var(--border_normal);
  border-inline-start: none;
  height: var(--input_height);
  transition: var(--transition);
}



.highlight {
  position: relative;
  background: linear-gradient(90deg, #ff9800, #ffb84d);
  color: #fff;
  padding: 0.4rem 1.2rem;
  border-radius: 0.8rem;
  font-size: 1.2rem;
  font-weight: bold !important;
  cursor: pointer;
  overflow: hidden;
}
.shine_effect {
  position: relative;
  overflow: hidden;
}

/* لمعة أنعم جدًا */
.shine_effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.15) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  filter: blur(6px); /* تمويه خفيف للنعومة */
  animation: shineMove 3.5s infinite ease-in-out;
}

@keyframes shineMove {
  0% { left: -120%; }
  100% { left: 130%; }
}


.span_Total_In_Table {
  position: relative;
  /* display: flex; */
  /* text-align: center; */
  align-items: center;
  min-width: 7rem;
  width: fit-content;
  white-space: nowrap;
  padding: 0.5rem;
  text-align: start;
  background-color: var(--btn_search_backcolor);
  color: var(--Font_Color);
  border-radius: 0.3rem;
  border: var(--border_normal);
  height: 100%;
  transition: var(--transition);
}

.select_mirror_on_print_only{
  display: none;
}
@media print {
  .select_mirror_on_print_only{
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: start !important;
    align-items: center !important;
    min-width: fit-content !important;
    width: fit-content !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
}
.normal_Total_In_Table {
  position: relative;
  /* display: flex; */
  /* text-align: center; */
  align-items: center;
  /* min-width: 7rem; */
  width: fit-content;
  white-space: nowrap;
  padding: 0.5rem;
  text-align: start;
  /* background-color: var(--btn_search_backcolor); */
  color: var(--Font_Color);
  /* border-radius: 0.3rem; */
  /* border: var(--border_normal); */
  height: 100%;
  transition: var(--transition);
}

.reference_checkbox {
  height: 3rem;
}

.btn_search {
  width: 7rem;
  height: var(--input_height);
  padding-block-start: 0.7rem;
  padding-inline-start: 0;
  padding-block-end: 0.7rem;
  padding-inline-end: 0;
  margin-block-end: 1rem;
}

.btn_upload_attachment {
padding: 0.5rem;
}

.btn_upload_attachment * { /* de 3ashan el icon ely btegey mn el TT_ */
  color: var(--btn_search_color) !important;
}

.btn_upload_attachment,
.btn_search {
  background-color: var(--btn_search_backcolor);
  color: var(--btn_search_color);
  border: var(--border_normal);
  cursor: pointer;
  text-align: center;
  font-weight: normal;
  box-sizing: border-box;
  text-decoration: none;
  border-radius: 0.3rem;
  transition: var(--transition);
}


.left_icon {
  position: absolute;
  inset-inline-end: 0.3rem;
  /* background-color: white; */
  font-size: 1.3rem;
  color: var(--Font_Color);
  margin-inline-end: 0.5rem;
  opacity: 0.7;
  z-index: 3;

}

.clear_icon {
  display: none; /*Default*/
  position: absolute !important;
  inset-inline-end: 1.9rem !important;
  font-size: 1.2rem;
  cursor: pointer;
  /* background-color: white; */
  color: var(--Font_Color) !important;
  margin-inline-end: 0.5rem !important;
  transition: var(--transition) !important;
  opacity: 0.7;
  z-index: 4;
}

.clear_icon:hover {
  transform: translateY(-0.1rem); /* تأثير البروز عند التمرير */
  box-shadow: 0 1.2rem 2rem rgba(0, 0, 0, 0.4); /* تأثير الظل عند التمرير */
  color: var(--red_color) !important;
  transform: scale(1.1);

}

.clear_icon:active {
  transform: translateY(0.2rem); /* تأثير الضغط على الزر */
  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.3); /* تقليل الظل عند الضغط */
}


.clear_icon.focused {
  background-color: var(--table_row_alternative_background_color_while_hover) !important;
  color: var(--table_row_alternative_color_while_hover) !important;
}



.eye_icon {
  position: relative;
  margin: auto;
  font-size: 1.5rem;
  color: var(--Font_Color);
}

.btn_eye {
  position: relative;
  width: 4rem;
  height: var(--input_height);
  background-color: var(--btn_search_backcolor);
  color: var(--btn_search_color);
  border: var(--border_normal);
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
  margin-block-end: 1rem;
  border-radius: 0.3rem;
  transition: var(--transition);
}

.select_month_div {
  position: relative;
  width: 8rem;
  display: flex;
  flex-direction: row;
  border: none;
  outline: 0;
  text-align: center;
  align-items: center;
  height: var(--input_height);
  border-radius: 0.3rem;
  margin: 0.5rem;
  cursor: pointer;
}

.select_month_div select {
  position: relative;
  height: var(--input_height);
  width: 100%;
  border: var(--border_normal);
  box-sizing: border-box;
  border-radius: 0.3rem;
  background-color: white;
  transition: 0.2s ease;
  padding: 0.5rem;
  cursor: pointer;
}

.select_month_div select option {
  position: relative;
  height: var(--input_height);
  width: 100%;
  border: var(--border_normal);
  box-sizing: border-box;
  border-radius: 0.3rem;
  background-color: white;
  transition: 0.2s ease;
  padding: 0.5rem;
}

.select,
.select_with_no_margin,
.table_select_with_no_margin,
.select_with_no_margin_with_blocked_color_in_table {
  /* min-width: 10rem; */
  width: fit-content;
  max-width: 100%;
  color: var(--Font_Color);
  background-color: var(--input_text_background_color);
  font-size: 1.3rem; /*estptal 1.4rem*/
  padding: 0.5rem;
  transition: var(--transition);
  border: var(--border_normal);
  border-radius: 0.3rem;
  text-align: start;
}

.select {
  margin-block-end: 1rem;
  height: var(--input_height);
}
.select_with_no_margin,
.select_with_no_margin_with_blocked_color_in_table {
  margin-block-end: 0;
  height: var(--input_height);
}

.table_select_with_no_margin {
  margin-block-end: 0;
  height: 100%;
}

.select_with_no_margin_with_blocked_color_in_table{
  background-color: var(--btn_search_backcolor);
  height: 100%;
}

.dropdown_container_without_margin {
margin-block-end: none;
}

.dropdown_container {
margin-block-end: 1rem;
}

 .dropdown_container_without_margin,
 .dropdown_container {
  display: flex;
  flex-direction: column;
  position: relative;
  border: none;
  /* width: 25rem; */
  width: fit-content;
  height: var(--input_height);
  background-color: var(--input_text_background_color);
  color: var(--Font_Color);
  border-radius: 0.3rem;
  transition: var(--transition);
  /*z-index: 1; */ /* canceled */
 }
/* @media screen and (max-width: 750px) {
  .dropdown_container{
    width: 100%;
  }
} */
.radio_buttons_container{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  /* gap: 1rem; */
  height: fit-content;
  width: fit-content;
  padding-inline-start: 1rem;
  padding-block-end: 1rem;

}

.radio_button_row{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  height: fit-content;
  width: fit-content;
  color: var(--reports_not_final_account_color);
}


.dropdown_select {
  display: flex;
  flex-direction: row;
  position: relative;
  outline: none;
  border-radius: 0.3rem;
  width: 100%;
  height: 100%;
  background-color: var(--input_text_background_color);
  color: var(--Font_Color);
  transition: var(--transition);
  align-items: center;
  z-index: 1;
}

/*
.dropdown_select i {
  position: absolute;
  inset-inline-end: 0.3rem;
  pointer-events: none;
  font-size: 1.5rem;
  color: var(--icon_btn_color);
  z-index: 3;
  width: fit-content;
  transition: var(--transition);
  opacity: 0.7;
}
*/
.dropdown_select_input {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  border: var(--border_normal);
  border-radius: 0.3rem;
  /* height: var(--input_height); */
  height: 100%;
  min-width: 5rem;
  /* width: fit-content; */
  width: 100%;
  background-color: var(--input_text_background_color);
  color: var(--Font_Color);
  padding-inline-start: 0.5rem;
  padding-inline-end: 3.8rem; /* متغيرهاش مش هتظبط معاك غير كده عشان الجداول */
  /* padding-inline-end: 3.1rem; */
  padding-block-start: 0.5rem;
  padding-block-end: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
  z-index: 2;
}



.td_number{
    color: var(--Font_Color);
    background-color: var(--input_text_background_color);
    border-radius: 0.3rem;
    border: var(--border_normal);
    padding: 0.5rem;
    min-width: 5rem;
    max-width: 10rem;
    width: 100%;
    height: var(--input_height);
    transition: var(--transition);
    text-align: start;
    white-space: wrap;
}


.div_input_md, .div_input_sm{
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  border: var(--border_normal);
  border-radius: 0.3rem;
  white-space: wrap;
  min-width: 6rem;
  min-height: var(--input_height);
  height: 100%;
  overflow: auto;
  /* width: fit-content; */
  width: 100%;
  background-color: var(--input_text_background_color);
  color: var(--Font_Color);
  padding: 0.5rem;
  white-space: nowrap;
  transition: var(--transition);
  z-index: 2;
}


.div_input_sm {
  /* min-width: 5rem;
  max-width: 10rem; */
  width: 100%;
}



@media print{
  .td_inside_row_div {
    display: flex !important;
    flex-direction: row !important;
    justify-content: start !important;
    align-items: center !important;
    width: fit-content !important;
    height: 100% !important;
    width: 100% !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0.5rem !important;
  }

  .td_inside_row_div *{
    border: none !important;
    width: fit-content !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  input {
    color: #000 !important;
    background-color: white !important;
  }
  
}

.div_input_md {
  min-width: 17rem;
  max-width: 20rem;
}

.default_option_btn {
  position: relative !important;
  font-size: 1.3rem !important;
  /* padding: 0.5rem !important; */
  padding-inline-start: 1rem;
  pointer-events: auto !important;
  cursor: pointer !important;
  color: gray !important;
  opacity: 0.8 !important;
}

.default_option_btn:hover {
   transform: translateY(-0.2rem); /* تأثير البروز عند التمرير */
   opacity: 0.9 !important;
   color: var(--Font_Color) !important;
   scale: 1.01 !important;
}

@media print{
  .default_option_btn {
    display: none !important;
  }
}

 .default_option_container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: fit-content;
  flex-wrap: wrap;
  padding-block-start: 0.7rem;
  padding-block-end: 0.8rem;
 }

.dropdown_menue {
  position: absolute;
  inset-inline-end: 0;
  z-index: 5;
  /* display: none; */
  background-color: var(--input_text_background_color);
  color: var(--Font_Color);
  border: var(--border_normal);
  border-radius: 0.3rem;
  width: 100%;
  max-height: 20rem;
  overflow-y: auto;
  transition: var(--transition);
}

.dropdown_menue_Open_bottom {
  /* thisi is used in javascript  */
  inset-block-start: 100%;
}

.dropdown_menue_Open_top {
  /* thisi is used in javascript  */
  inset-block-end: 100%;
}

/* .dropdown_menue input {
  height: var(--input_height);
  width: 100%;
  padding-block-start: 0;
  padding-inline-start: 0.5rem;
  padding-block-end: 0;
  padding-inline-end: 0.5rem;
  background-color: var(--input_text_background_color);
  color: var(--Font_Color);
  border: var(--border_normal);
  transition: var(--transition);
} */

.dropdown_search {
  display: flex;
  position: sticky;
  inset-block-start: 0;
  width: 100%;
  background-color: var(--input_text_background_color);
  color: var(--Font_Color);
  padding-block-end: 0.3rem;
  /* padding-block-start: 0.3rem; */
  /* padding: 0.3rem; */
  z-index: 2;
  /* border: var(--border_normal); */
  transition: var(--transition);
}

.dropdown_search input {
  position: relative;
  width: 100%;
  height: var(--input_height);
  box-sizing: border-box;
  border-radius: 0.3rem;
  padding: 0.5rem;
  background-color: var(--input_text_background_color);
  color: var(--Font_Color);
  border: var(--border_normal);
  transition: var(--transition);
}

.dropdown_search i {
  position: absolute;
  color: var(--icon_btn_color);
  inset-inline-end: 1.2rem;
  inset-block-start: 1.3rem;
  font-size: 1.3rem; /*estptal 1.4rem*/
  transition: var(--transition);
}

/* ----------------------------------------------- */

.tree_2div_container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex-grow: 1;
  gap: 1rem; /*  المسافه الداخلية بين العناصر */
}

.tree {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  flex-grow: 1;
  overflow-y: auto; /* بدون دا العرض فى الموبايل هيبوظ */
}

.dialog_partition_div {
  display: none;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  flex-grow: 1;
  overflow-y: auto; /* بدون دا العرض فى الموبايل هيبوظ */
}

.lbl_group_name {
  position: relative;
  display: inline-block;
  word-wrap: normal;
  /* التفاف النص  */
  display: block;
  font-weight: bold;
  width: fit-content;
  margin-inline-start: 0.5rem;
  /* margin-block-end: 0.8rem; */
  /* margin-block-start: 0.5rem; */
  color: var(--Font_Color);
  transition: var(--transition);
}

/* tables */

.search_in_table_div {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 100%;
  width: auto;
}

.search_in_table_div .input_with_icon_div {
padding: 0 !important;
}

@media print {
  .search_in_table_div {
    display: none;
  }
}

/* table containesr */
.tableContainer {
  display: flex;
  flex-direction: column;
  /* overflow: auto; */
}

@media print {
  .tableContainer {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
}

.review_table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto;
  overflow: auto;
}



.review_table th {
  position: sticky;
  cursor: pointer;
  inset-block-start: -0.1rem;
  z-index: 2;
  align-items: center;
  text-align: start;
  background-color: var(--table_header_background_color);
  color: var(--table_header_color);
  height: 3rem;
  transition: var(--transition);
}

.review_table th i {
  /* font-size: 1.5rem; */
  padding-inline-start: 0.5rem;
}

.review_table td,
.review_table th {
  border: var(--table_border);
  padding: 0.5rem;
  line-height: 1.5; /* المسافة بين السطور داخل الخلية */
  /* cursor: pointer; */
   text-align: start;
  transition: var(--transition);
 
}


/* todo main row */
.review_table tbody tr:nth-child(odd) {
  background-color: var(--table_row_main_background_color);
  color: var(--table_row_main_color);
  transition: var(--transition);
}

.review_table tbody tr:nth-child(odd):hover {
  background-color: var(--table_row_main_background_color_while_hover);
  color: var(--table_row_main_color_while_hover);
}

/*___________________________________*/

/* todo alternative row*/
.review_table tbody tr:nth-child(even) {
  background-color: var(--table_row_alternative_background_color);
  color: var(--table_row_alternative_color);
  transition: var(--transition);
}

.review_table tbody tr:nth-child(even):hover {
  background-color: var(--table_row_alternative_background_color_while_hover);
  color: var(--table_row_alternative_color_while_hover);
}

@media print{
  .review_table tbody tr:nth-child(odd),
  .review_table tbody tr:nth-child(even){
    color: #000 !important;
    background-color: white !important;
  }
}

.td_no_result {
  color: var(--Font_Color);
}

.ellipsis_3points_10rem,
.ellipsis_3points_13rem,
.ellipsis_3points_15rem,
.ellipsis_3points_17rem,
.ellipsis_3points_18rem,
.ellipsis_3points_20rem,
.ellipsis_3points_dropdown_input_10rem,
.ellipsis_3points_dropdown_input_13rem,
.ellipsis_3points_dropdown_input_15rem,
.ellipsis_3points_dropdown_input_17rem,
.ellipsis_3points_dropdown_input_20rem,
.ellipsis_3points_dropdown_input_24rem,
.ellipsis_3points_dropdown_input_29rem {
  white-space: nowrap;    /* يمنع التفاف النص إلى سطر جديد */
  overflow: hidden;       /* يخفي النص الزائد عن العرض */
  text-overflow: ellipsis; /* يظهر النقاط الثلاث (...) للنص المخفي */
}

.ellipsis_3points_10rem {
  max-width: 10rem;       /* يحدد العرض الأقصى */;
}

.ellipsis_3points_13rem {
  max-width: 13rem;       /* يحدد العرض الأقصى */;
}

.ellipsis_3points_15rem {
  max-width: 15rem;       /* يحدد العرض الأقصى */;
}
.ellipsis_3points_17rem {
  max-width: 17rem;       /* يحدد العرض الأقصى */;
}

.ellipsis_3points_18rem {
  max-width: 18rem;       /* يحدد العرض الأقصى */;
}
.ellipsis_3points_20rem {
  max-width: 20rem;       /* يحدد العرض الأقصى */;
}

.ellipsis_3points_dropdown_input_10rem {
  min-width: 10rem;
  width: 10rem;
  max-width: 10rem;
}

.ellipsis_3points_dropdown_input_13rem {
  min-width: 13rem;
  width: 13rem;
  max-width: 13rem;
}
.ellipsis_3points_dropdown_input_15rem {
  min-width: 15rem;
  width: 15rem;
  max-width: 15rem;
}
.ellipsis_3points_dropdown_input_17rem {
  min-width: 17rem;
  width: 17rem;
  max-width: 17rem;
}
.ellipsis_3points_dropdown_input_20rem {
  min-width: 20rem;
  width: 20rem;
  max-width: 20rem;
}

.ellipsis_3points_dropdown_input_24rem {
  min-width: 24rem;
  width: 24rem;
  max-width: 24rem;
}

.ellipsis_3points_dropdown_input_29rem {
  min-width: 29rem;
  width: 29rem;
  max-width: 29rem;
}
/*________________________________*/

/* .review_table tr:hover {
  background-color: #ddd;
} */

/* row height */
.review_table tr {
  /* height: 3.5rem; */
   /* height: var(--input_height) */
  height: 3.3rem;
 
}

.table_save_btn,
.table_delete_btn,
.table_update_btn,
.table_view_btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0.2rem;
  min-width: 3.5rem;
  width: fit-content;
  color: var(--btn_color);
  text-align: center;
  /* border: 0.1rem solid var(--btn_update_backcolor); */
  border-radius: 0.3rem;
  cursor: pointer;
  transition: var(--transition);
}

.table_save_btn {
  background-color: var(--btn_save_backcolor);
}

.table_delete_btn {
  background-color: var(--btn_delete_backcolor);
}

.table_update_btn {
  background-color: var(--btn_update_backcolor);
}

.table_view_btn {
  background-color: var(--btn_new_backcolor);
}

.table_update_btn:hover,
.table_view_btn:hover {
  opacity: var(--btn_hover_opacity);
  /* لون خلفية الزر عند التحويل إليه */
}


.table_blue_condition {
  color: var(--btn_new_backcolor) !important;
  /* font-weight: bold; */
}

.table_green_condition {
  color: var(--btn_save_backcolor) !important;
  /* font-weight: bold; */
  position: relative; /* ضروري للسماح بإضافة العنصر قبل */
  
}

.table_orange_condition {
  /* color: var(--btn_update_backcolor); */
  color: darkorange !important;
  /* font-weight: bold; */
}

.table_red_condition {
  color: var(--btn_delete_backcolor) !important;
  /* font-weight: bold; */
}


.table_teal_condition {
  color: var(--btn_teal_backcolor);
  /* font-weight: bold; */
}
.table_blue_condition,
.table_green_condition,
.table_orange_condition,
.table_red_condition,
.table_teal_condition {
  position: relative; /* للسماح بإضافة العنصر قبل */
}

.table_blue_condition::before,
.table_green_condition::before,
.table_orange_condition::before,
.table_red_condition::before,
.table_teal_condition::before {
  content: "";
  display: inline-block;
  width: 0.8rem; /* حجم الدائرة */
  height: 0.8rem; /* نفس الحجم لضمان أن تكون دائرية */
  border-radius: 50%; /* لجعلها دائرية */
  margin-inline-end: 0.7rem; /* مسافة بين النقطة والنص */
  vertical-align: middle; /* لضبط المحاذاة مع النص */
  box-shadow: 0 0 1rem currentColor; /* تأثير الإضاءة */
  animation: glowing 1.5s infinite alternate; /* حركة التوهج مربوط بكود @keyframes glowing */
  background-color: currentColor; /* لجعل لون الدائرة نفس لون النص */
}

/* كود التوهج */
@keyframes glowing {
  from {
    box-shadow: 0 0 0.5rem currentColor;
  }
  to {
    box-shadow: 0 0 1.5rem currentColor, 0 0 2.5rem currentColor;
  }
}


.span_blue_backgrouund_condition,
.span_green_backgrouund_condition,
.span_orange_backgrouund_condition,
.span_teal_backgrouund_condition,
.span_red_backgrouund_condition {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--btn_color);
  font-weight: bold;
  padding: 0.2rem 0.3rem;
  border-radius: 0.3rem;
  width: fit-content;
}

.span_blue_backgrouund_condition {
  background-color: var(--btn_new_backcolor);
}

.span_green_backgrouund_condition {
  background-color: var(--btn_save_backcolor);
}

.span_orange_backgrouund_condition {
  background-color: var(--btn_update_backcolor);
}

.span_teal_backgrouund_condition {
  background-color: var(--btn_teal_backcolor);
}

.span_red_backgrouund_condition {
  background-color: var(--btn_delete_backcolor);
}
@media print {
  .table_blue_condition::before,
  .table_green_condition::before,
  .table_orange_condition::before,
  .table_red_condition::before,
  .table_teal_condition::before {
    content: none !important;
    display: none !important;
  }

  .span_blue_backgrouund_condition,
  .span_green_backgrouund_condition,
  .span_orange_backgrouund_condition,
  .table_teal_condition,
  .span_red_backgrouund_condition {
    background-color: white !important;
    border: none !important;
    outline: none !important;
  }

}
.table_totals_row {
  background-color: var(--table_header_background_color) !important;
  color: var(--table_header_color) !important;
  font-weight: bold !important;
  /* opacity: 0.9 !important; */
}

@media print {
  .table_totals_row {
    opacity: 1 !important; /* إزالة الشفافية عند الطباعة */
    background-color: transparent !important; /* خلفية شفافة */
  }
}

.table_fotter_buttons_row_div {
  display: flex;
  flex-direction: row;
  margin-block-start: 1rem;
}

@media print {
  .table_fotter_buttons_row_div {
    display: none;
  }
}

.table_footer_options_btn {
  width: auto;
  height: var(--input_height);
  padding-inline-start: 0.7rem;
  padding-inline-end: 0.7rem;
  background-color: var(--btn_search_backcolor);
  color: var(--btn_search_color);
  border: var(--border_normal);
  cursor: pointer;
  text-align: center;
  border-radius: 0.3rem;
  transition: var(--transition);
}

.table_footer_show_data {
  white-space: nowrap;
  border: none;
  width: auto;
  /* height: 3rem; */
  padding-block-start: 0.5rem;
  padding-inline-start: 0.5rem;
  padding-block-end: 0.5rem;
  padding-inline-end: 0.5rem;
  margin-inline-start: 0.5rem;
  margin-inline-end: 0.5rem;
  border-radius: 0.2rem;
  cursor: pointer;
  background-color: var(--table_footer_show_data_background_color);
  color: var(--table_footer_show_data_color);
  border: var(--border_normal);
  transition: var(--transition);
}

.table_footer_show_data:hover,
.table_footer_options_btn:hover {
  opacity: var(--btn_hover_opacity);
}

.table_footer_show_data:active,
.table_footer_options_btn:active {
  transform: scale(1.1); /* زيادة حجم العنصر بنسبة 10% */
}
/****************************************************************/
/** input table */

.input_tableContainer {
  width: auto;
  max-width: 100%;
}

.input_table {
  /* border-collapse: collapse; */
  border: none;
  /* border-radius: 0.3rem; */
  width: 100%;
  margin: 0 auto;
  margin-block-end: 1rem;
  overflow: auto;
}

.input_table th {
  align-items: center;
  text-align: start;
  background-color: var(--table_header_background_color);
  color: var(--table_header_color);
  height: 2.5rem;
  text-align: justify;
  transition: var(--transition);
}

.dropdown_container_input_table {
  display: flex;
  flex-direction: column;
  position: relative;
  border: none;
  /* width: 25rem; */
  width: fit-content;
  /* height: var(--input_height); */
  height: 100%;
  background-color: var(--input_text_background_color);
  color: var(--Font_Color);
  border-radius: 0.3rem;
  transition: var(--transition);
  width: 100%;
}

/* @media screen and (max-width: 750px) {
  .dropdown_container{
    width: 100%;
  }
} */

.dropdown_select_input_table {
  display: flex;
  flex-direction: row;
  position: relative;
  outline: none;
  border-radius: 0.3rem;
  width: 100%;
  height: 100%;
  background-color: var(--input_text_background_color);
  color: var(--Font_Color);
  transition: var(--transition);
  align-items: center;
  /* z-index: 1; */
}

/*

.dropdown_select_input_table i {
  position: absolute;
  inset-inline-end: 0.3rem;
  pointer-events: none;
  color: var(--icon_btn_color);
  z-index: 3;
  width: fit-content;
  transition: var(--transition);
  font-size: 1.3rem;
  opacity: 0.7;
}

*/
/** inputTable_dropdown_table*/

.inputTable_dropdown_tableContainer {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  width: 100%;
  max-height: 16.3rem; /* ماكس 20 يطرح منه ارتفاع عنصر مربع البحث */
  overflow-y: auto;
}

.inputTable_dropdown_table {
  border-collapse: collapse;
  border-radius: 0.3rem;
  width: 100%;
  margin: 0 auto;
  overflow: auto;
}

.inputTable_dropdown_table th {
  position: sticky;
  inset-block-start: -0.1rem;
  z-index: 2;
  align-items: center;
  text-align: start;
  background-color: var(--table_header_background_color);
  color: var(--table_header_color);
  height: 3rem;
  text-align: justify;
  transition: var(--transition);
}

.inputTable_dropdown_table td,
.inputTable_dropdown_table th {
  border: var(--table_border);
  padding: 0.5rem;
  cursor: pointer;
  transition: var(--transition);
}

/* todo main row */
.inputTable_dropdown_table tbody tr:nth-child(odd) {
  background-color: var(--table_row_main_background_color);
  color: var(--table_row_main_color);
  transition: var(--transition);
}

.inputTable_dropdown_table tbody tr:nth-child(odd):hover {
  background-color: var(--table_row_main_background_color_while_hover);
  color: var(--table_row_main_color_while_hover);
}

.custom_tr_hover {
  background-color: var(
    --table_row_main_background_color_while_hover
  ) !important ;
  color: var(--table_row_main_color_while_hover) !important;
}

/* todo alternative row*/
.inputTable_dropdown_table tbody tr:nth-child(even) {
  background-color: var(--table_row_alternative_background_color);
  color: var(--table_row_alternative_color);
  transition: var(--transition);
}

.inputTable_dropdown_table tbody tr:nth-child(even):hover {
  background-color: var(--table_row_alternative_background_color_while_hover);
  color: var(--table_row_alternative_color_while_hover);
}

.td_no_result {
  color: var(--Font_Color);
}

/** END */
/* 
.dropdown_select_input_table input[type="search"] {
  border: var(--border_normal);
  height: var(--input_height);
  width: 100%;
  background-color: var(--input_text_background_color);
  color: var(--Font_Color);
  padding: 0.5rem;
  padding-inline-end: 0.5rem;
  cursor: pointer;
  transition: var(--transition);
  z-index: 2;
  width: fit-content;
  
} */

/*___________________________________*/

.input_table tr {

  min-height: 3.5rem;
  max-height: 3.5rem;
  height: 3.5rem;
  height: var(--input_height);
}

/* الافتراضي لكل المتصفحات */
.input_table tr td {
  height: inherit; 
}


  /* لما المتصفح يكون فايرفوكس أو بيدعم -moz-appearance */
@supports (-moz-appearance: none) {
  .input_table tr td {
    height: 100%;
  }
}


.input_table .input_table_input_div {
  display: flex;
  flex-direction: row;
  height: 100%;
  justify-content: start;
  align-items: center;
}





.span_start,
.span_end {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--btn_search_backcolor);
  color: var(--btn_search_color);
  min-height: var(--input_height);
  height: 100%;
  border: var(--border_normal);
  padding: 0.5rem 0.5rem;
  pointer-events: none;
  white-space: nowrap;
  white-space: nowrap;
  transition: var(--transition);
}

@media print{
.span_start,
.span_end {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background-color: white;
  color: black;
}
}


.span_start {
  border-start-start-radius: 0.3rem;
  border-end-start-radius: 0.3rem;
  border-inline-end: 0; /* مش none، لازم تبقى قيمة رقمية */
}



.span_end {
  border-end-end-radius: 0.3rem;
  border-start-end-radius: 0.3rem;
  border-inline-start: 0;
}

.input_table_normal_input_text {
  position: relative;
  height: 100%;
  /* height: var(--input_height); */
  width: 10rem;
  background-color: var(--input_text_background_color);
  color: var(--Font_Color);
  padding: 0 0.5rem;
  border: var(--border_normal);
  border-radius: 0.3rem;
  transition: var(--transition);
}

.reference_input {
  position: relative;
  height: var(--input_height);
  width: fit-content;
  background-color: var(--input_text_background_color);
  color: var(--Font_Color);
  padding: 0 0.5rem;
  height: var(--input_height);
  border: var(--border_normal);
  border-radius: 0.3rem;
  transition: var(--transition);
  text-align: center;
}

.reference_div_auto_mode {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  padding: 0.7rem;
  height: var(--input_height);
  width: fit-content;
  background-color: var(--btn_search_backcolor);
  color: var(--Font_Color);
  border: var(--border_normal);
  border-radius: 0.3rem;
  transition: var(--transition);
  pointer-events: none;
}

.reference_input_auto_mode {
  position: relative;
  height: var(--input_height);
  width: 14rem;
  background-color: var(--btn_search_backcolor);
  color: var(--btn_search_color);
  padding: 0 0.5rem;
  height: var(--input_height);
  border: var(--border_normal);
  border-radius: 0.3rem;
  transition: var(--transition);
  pointer-events: none;
  text-align: center;
}

.reference_input_checkbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--btn_search_backcolor);
  color: var(--btn_search_color);
  width: fit-content;
  height: var(--input_height);
  border: var(--border_normal);
  border-inline-end: none;
  padding: 0.7rem 0.7rem;
  transition: var(--transition);
}

.checkbox_label {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  white-space: nowrap;
  white-space: nowrap;
  height: var(--input_height);
  width: auto;
  background-color: var(--btn_search_backcolor);
  color: var(--btn_search_color);
  padding: 0.8rem;
  height: var(--input_height);
  border: var(--border_normal);
  border-radius: 0.3rem;
  transition: var(--transition);
}

/* .input_table td div input{


} */

.dragbutton_table {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: fit-content;
  padding-inline-end: 0.5rem;
  background-color: inherit;
}
.dragbutton_table button {
  cursor: grab;
  background-color: inherit;
}

.dragbutton_table button:active {
cursor: grabbing;
}
.dragbutton_table button i {
  color: var(--Font_Color);
}

.tr-dragging {
  opacity: 0.9;
  background-color: green !important;
  position: relative;
  z-index: 1000;
  box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.3);
  transform: scale(1.02);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.tr-dragging td {
  background-color: green !important;
  background: inherit;
  position: relative;
  z-index: 1000;
}
.tr-dragging,
.tr-dragging * {
  background-color: green !important;
  color: white !important;
  z-index: 1000 !important;
}

.table_buttons_div {
  padding: 0.5rem;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  height: 100%;
  gap: 1rem;
  /* padding-inline-start: 1rem; */
}

.td-disabled {
  pointer-events: none !important; /* يمنع الضغط أو التفاعل */
  /* opacity: 0.5 !important;  */
}

.td-disabled1 {
  pointer-events: none !important; /* يمنع الضغط أو التفاعل */
  /* opacity: 0.5 !important;  */
  background-color: var(--btn_search_backcolor) !important;
  transition: var(--transition);
}


.table_buttons_div button {
  cursor: pointer;
  background-color: inherit;
  opacity: 0.8;
  transition: var(--transition);
}

.table_buttons_div button:hover,
.dragbutton_table button:hover {
  opacity: 0.6;
}
.table_buttons_div button:focus,
.dragbutton_table button:focus {
  transform: scale(1.1); /* زيادة حجم العنصر بنسبة 10% */
}

.table_textarea {
  color: var(--Font_Color);
  /* height: 2.5rem; */
  height: 100%;
  width: 100%;
  border: var(--border_normal);
  padding: 0.5rem;
  /* resize: none; إخفاء زرار التحكم في حجم الـ textarea */
  transition: var(--transition);
  align-items: center;
  border: var(--border_normal);
  transition: var(--transition);
  color: var(--Font_Color);
  background-color: var(--input_text_background_color);
}

.table_total_row td {
  padding-block-start: 0.7rem;
  color: var(--Font_Color);
  font-weight: bold;
  transition: var(--transition);
}
.totalsSpan_totalAfterTax{
  position: relative;
  display: flex;
  flex-direction: row;
  font-weight: bold;
  font-size:1.6rem
}
/** input_table  INPUTS*/
.inputTable_noteTd {
  color: var(--Font_Color);
  background-color: var(--input_text_background_color);
  border-radius: 0.3rem;
  border: var(--border_normal);
  padding: 0.5rem;
  min-width: 17rem;
  /* max-width: 25rem; */
  width: 100%;
  height: var(--input_height);
  transition: var(--transition);
  text-align: start;
  white-space: wrap;
}

.inputTable_NumberTd {
  
  color: var(--Font_Color);
  background-color: var(--input_text_background_color);
  border-radius: 0.3rem;
  border: var(--border_normal);
  padding: 0.5rem;
  min-width: 7rem;
  max-width: 15rem;
  width: auto;
  /* height: var(--input_height); */
  height: 100%;
  transition: var(--transition);
  
}
/** END*/
/*________________________________*/

/*! END / table-----------------------------------------------*/

.upArrow {
  border: none;
  color: gray;
  align-items: center;
  text-align: center;
  margin-inline-end: 0.7rem;
  cursor: pointer;
  transition: var(--transition);
}

.upArrow:hover {
  color: blue;
  transform: scale(1.2);
}

/* Media examplese */

/* 1:- فى حالة الشاشه اكبر من او تساوى  750 بكسل يتم الاتى  */
@media screen and (min-width: 750px) { /*! Don\t change px to rem never*/
  /* .sidebar {
        width: 25rem;
        height: 100%;
    } */
}

/* 2:- فى حالة الشاشه اصغر من او تساوى 750 بكسل يتم الاتى  */
@media screen and (max-width: 750px) { /*! Don\t change px to rem never*/
  /* .sidebar {
        height: 5rem;
        flex-direction: row;
        width: 100%;
        position: fixed;
        inset-block-start: 0;
        overflow-x: auto;
    }

    .buttons {
        flex-direction: row;
    } */
}

/*! alerts */

/* التأثيرات الانتقالية */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* إخفاء النافذة */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* @@@@@@@@@ اوعى تحذف اى تعليق @@@@@@@ */
.alert-container {
  position: fixed;
  inset-block-start: 0;
  /* bottom: 0; عرض التنبيهات   اسفل الشاشه */
  /* inset-inline-start: 0; */
  inset-inline-start: 0;
  /* use this insted of right :0  to responsive with page direction*/
  margin: 1rem;
  width: auto;
  max-width: 100%;
  /* لتتجاوب مع كل الشاشات */
  z-index: 999;
  /* الظهور فوق كل العناصر */
  display: flex;
  flex-direction: column;
  /* ترتيب التنبيهات من الاسفل إلى الاعلى */
  /* flex-direction: column-reverse; ترتيب التنبيهات من الأعلى إلى الأسفل */
  align-items: flex-start;
  /* تحديد محور الضبط إلى اليمين */
  /*align-items: center; /* تحديد محور الضبط إلى المنتصف */
  /*align-items: flex-end; /* تحديد محور الضبط إلى اليسار */
}

@media print {
  .alert-container {
    display: none;
  }
}
.alert {
  margin-block-end: 1rem;
  padding: 1.4rem;
  border-radius: 0.2rem;
  position: relative;
  opacity: 0;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  text-align: start;
  box-shadow: 0rem 0rem 2rem rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s ease;
  /* أزل تأثير transition الخاص بـ opacity والتحويل */
}

/* تطبيق الرسوم المتحركة عند الظهور */
.alert.show {
  animation: fadeIn 0.5s forwards;
  /* يمكنك تحديث مدة الرسوم المتحركة حسب الحاجة */
}

/* تطبيق الرسوم المتحركة عند الاختفاء */
.alert.hide {
  animation: fadeOut 0.5s forwards;
  /* يمكنك تحديث مدة الرسوم المتحركة حسب الحاجة */
}

/* تطبيق الرسوم المتحركة عند الظهور */
.alert.show {
  animation: fadeIn 0.5s forwards;
  /* يمكنك تحديث مدة الرسوم المتحركة حسب الحاجة */
}

/* تطبيق الرسوم المتحركة عند الاختفاء */
.alert.hide {
  animation: fadeOut 0.5s forwards;
  /* يمكنك تحديث مدة الرسوم المتحركة حسب الحاجة */
}

.alert:hover {
  /* box-shadow: 0rem 0rem 4rem rgba(0, 0, 0, 0.7); */
  box-shadow: 0rem 0rem 3rem #66afe9;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-inline-start: 0.7rem solid green;
}

.alert-fail {
  color: #721c24;
  background-color: #f8d7da;
  border-inline-start: 0.7rem solid red;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-inline-start: 0.7rem solid blue;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  /* #fff3cd */
  border-inline-start: 0.7rem solid orange;
  /*#ffeeba*/
}

.alert-success,
.alert-fail,
.alert-info,
.alert-warning {
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: bold;
}
/* .alert-content {
    margin: 0;
    color: var(--btn_color);
    font-size: 1.5rem;
    font-weight: bold;
  } */

.alert.show {
  opacity: 1;
  transform: translateY(0);
  /* تحريك التنبيه إلى الأعلى عند الظهور */
}

.renderTotalsInFooter_container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: start !important;
  align-items: start !important;
}
/** Dialog*/
/* تغليف النافذة */
.dialogOverlay {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  inset-block-start: 0;
  inset-inline-start: 0;
/* العرض */
width: 100vw;   /* للمتصفحات القديمة - ممكن يحسب الـ scrollbar */
width: 100dvw;  /* للمتصفحات الحديثة - يحسب العرض الفعلي بدون الـ scrollbar */

/* الارتفاع */
height: 100vh;   /* للمتصفحات القديمة - ممكن يسبب مشاكل على الموبايل مع الـ address bar */
height: 100dvh;  /* للمتصفحات الحديثة - ارتفاع ديناميكي صح حسب الـ viewport */
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

/* النافذة */
.dialog {
  background-color: var(--bg_white_backcolor);
  padding-block-start: 0.5rem;
  padding-block-end: 2rem;
  padding-inline-start: 2rem;
  padding-inline-end: 2rem;
  /* padding: 2rem; */
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.3s;
  /* margin-block-start: 50%; */
}

.dialog_input {
  /* width: 40rem !important; */
  width: fit-content;
  overflow: auto !important;
}
@media screen and (max-width: 600rem) {
  .dialog_input {
    width: fit-content;
    max-width: 90% !important;
    height: fit-content;
    max-height: 90% !important;
  }
}

.dialog_header {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  /* margin-block-end: 1rem; */
}

/* 
  .dialog_header h3 {
    position: relative;
    display: flex; flex-direction: row; justify-content: start; align-items: center;
    border-block-end: var(--h2_border_bottom);
    background-color: var(--h2_background_color);
    padding-block-end: 1rem;
    width: 100%;
    color: var(--h2_color);
    box-shadow: var(--h2_box_shadow);
    transition: var(--transition);
    margin-block-end: 1.5rem;
    line-height: 2.5rem;
  } */

.dialog_body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.dialog_body p {
  position: relative;
  background-color: var(--h2_background_color);
  width: 100%;
  font-size: 1.7rem;
  font-weight: bold;
  color: var(--h2_color);
  box-shadow: var(--h2_box_shadow);
  transition: var(--transition);
  line-height: 2.5rem;
}

.dialog_footer {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  flex-wrap: wrap;
  line-height: 3.2rem;
  padding-block-start: 1.5rem;
  width: 100%;
  margin-block-start: 1rem;
  margin-block-end: 1rem;
  border-block-start: var(--h2_border_bottom);
  gap: 1rem;
}
/* الأزرار
  .dialog-footer button {
      margin: 0.5rem;
      padding: 1rem 2rem;
      border: none;
      border-radius: 0.3rem;
      cursor: pointer;
  } */

.deleted_text {
  text-decoration: line-through;
  color: gray;
  transition: var(--transition);
}

/*---------------------------*/


/* الخصائص الأساسية للرابط */


.link_with_fixed_colors {
  color : #0000EE;
  background-color: rgb(237, 237, 237);
  text-decoration: underline;
}

.link {
color: var(--btn_new_backcolor); /* لون النص الأساسي */
background-color: var(--btn_search_backcolor);
}

.link,
.link_with_fixed_colors {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-decoration: none; /* إزالة التسطير */
  cursor: pointer;
  padding: 0.5rem;
  transition: var(--transition);
}
/* الخصائص عند زيارة الرابط */
.link:visited {
  color: var(--btn_update_backcolor); /* لون النص بعد زيارة الرابط */
}

/* الخصائص عند الوقوف على الرابط */
.link:hover {
  color: var(--btn_delete_backcolor); /* تغيير لون النص عند الوقوف على الرابط */
  text-decoration: underline; /* إضافة تسطير عند الوقوف */
}

.link_with_fixed_colors:hover {
  color: #f44336;; /* تغيير لون النص عند الوقوف على الرابط */
  text-decoration: underline; /* إضافة تسطير عند الوقوف */
}

/* الخصائص عند النقر على الرابط */
.link:active {
  color: var(--btn_save_backcolor); /* تغيير لون النص عند النقر على الرابط */
}


.td_link_number {
  color: var(--font_link_number_color); /* لون النص الأساسي */
  cursor: pointer;
}

.td_link_number:hover {
  text-decoration: underline; /* إضافة تسطير عند الوقوف */
}

.td_link_number:active {
  transform: scale(1.1); /* زيادة حجم العنصر بنسبة 10% */
}

.td_normal_number {
  color: var(--Font_Color); /* لون النص الأساسي */
}

.td_negative_number {
  color: var(--btn_delete_backcolor) !important;
  /* color: var(--red_color); */
}

.td_link_number,
.td_normal_number,
.td_negative_number {
  font-size: var(--font_size_normal);
  /* padding: 1rem; */
  transition: var(--transition);
}

.color_negative{
  color: var(--btn_delete_backcolor) !important;
}


.table_number {
  color: var(--font_link_number_color); /* لون النص الأساسي */
  text-decoration: none; /* إزالة التسطير */
  cursor: pointer;
  /* font-weight: bold; */
  font-size: var(--font_size_normal);
  /* background-color: var(--btn_search_backcolor); */
  padding: 1rem;
  /* opacity: 0.8; */
  transition: var(--transition);
}

/* الخصائص عند زيارة الرابط */
.table_number:visited {
  color: var(--btn_update_backcolor); /* لون النص بعد زيارة الرابط */
}

/* الخصائص عند الوقوف على الرابط */
.table_number:hover {
  /* color: var(--btn_delete_backcolor); تغيير لون النص عند الوقوف على الرابط */
  /* opacity: 0.8;
   transform: scale(1.05)
    */
  text-decoration: underline; /* إضافة تسطير عند الوقوف */
}

/* الخصائص عند النقر على الرابط */
.table_number:active {
  color: var(--btn_save_backcolor); /* تغيير لون النص عند النقر على الرابط */
}

.inactive_color {
  background-color: var(--btn_delete_backcolor) !important;
  color: var(--btn_color);
}

.filer_icon {
  position: relative;
  cursor: pointer;
  font-size: 1.5rem;
  margin-block-start: 0.7rem;
  margin-inline-start: 0.3rem;
}

.filer_icon_cancel {
  position: relative;
  cursor: pointer;
  font-size: 1.5rem;
  margin-block-start: 0.7rem;
  margin-inline-start: 0.3rem;
}

.filer_div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  height: auto;
  padding: 1rem;
  margin-block-end: 1rem;
  border: var(--border_normal);
  border-radius: 0.3rem;
  transition: var(--transition);
}

.filter_div {
  position: relative;
  /* margin-block-end: 1rem; */
  /* gap: 3rem; */
  width: 100%;
  max-width: 100%;
  /* padding: 1rem; الحفاظ على الحشو */
  /* border: var(--border_normal); */
  height: auto;
  max-height: 100%; /* ارتفاع ابتدائي */
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out,
    background-color 0.5s ease 0s, color 0.5s ease 0s, box-shadow 0.5s ease 0s,
    border 0.5s ease 0s, opacity 0.5s ease, transform 0.5s ease;
  overflow: hidden;
}

@media print {
  .filter_div {
    display: none;
  }
}

.filter_div_sub {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.5rem;
  padding-block-end: 1rem;
  margin-block-end: 1rem;
  border-block-end: var(--border_normal);
  transition: var(--transition);
}

.filter_div_sub:hover {
  border-block-end: var(--border_normal_hover);
}

/* 
.aggregation{
  position: relative;
  display: flex; flex-direction: column !important; justify-content: start !important; align-items: start !important;
}

 */

 .qrcode_div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: fit-content;
  padding-block-start: 1rem;
  padding-block-end: 1rem;
  gap: 0.5rem;
 }
 
 .img_rules_hint {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 1rem;
  color: var(--Font_Color);
 }

.select_and_input_div {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: center;
  max-height: 100%;
  max-width: 100%; /* عرض العنصر الافتراضي */
  opacity: 1; /* شفافية العنصر الافتراضية */
  overflow: hidden; /* لإخفاء المحتوى الذي يتجاوز الحدود */
  transition: max-width 0.5s ease-in-out, max-height 0.5s ease-in-out,
    opacity 0.5s ease-in-out; /* تحولات العرض والشفافية */
}

.hidden_select_and_input_div {
  max-width: 0; /* إخفاء العنصر */
  max-height: 0;
  opacity: 0; /* جعل العنصر شفافًا */
  overflow: hidden; /* إخفاء المحتوى الذي يتجاوز الحدود */
}
.select_and_input_div select {
  /* min-width: 10rem; */
  width: auto;
  max-width: 100%;
  height: var(--input_height);
  color: var(--Font_Color);
  background-color: var(--btn_search_backcolor);
  font-size: 1.3rem; /*estptal 1.4rem*/
  padding: 0.5rem;
  transition: var(--transition);
  border: var(--border_normal);
  border-radius: 0.3rem;
  text-align: start;
}

.select_and_input_div input {
  margin-block-end: 0 !important;
}

.hidden_height {
  max-height: 0 !important;
  padding: 0 !important;
  border: none;
  opacity: 0;
  overflow: hidden !important;
}

.hidden_width {
  max-width: 0;
  padding: 0 !important;
  border: none;
  overflow: hidden !important;
}

.two_date_div {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: start;
  align-items: start;
  width: auto;
  max-width: 100%;
  padding: 0.5rem;
  gap: 0.5rem;
  transition: var(--transition);
}

.fn_container_div {
  position: fixed !important;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: end;
  inset-block-start: 7.4rem;
  inset-inline-end: 2rem;
}


@media print {
  .fn_container_div {
    display: none;
  }
}

@media screen and (max-width: 750px) { /*! Don\t change px to rem never*/
  .fn_container_div {
    inset-block-start: 7.4rem;
    inset-inline-end: 1.6rem;
  }

}
@media print {
  .fn_container_div {
    display: none;
  }
}

#fn_icon i {
  /* color: orange; */
  font-size: 1.9rem;
  font-weight: bold;
  padding: 0.6rem;
}

#fn_icon i,
.fn_options_div i {
  cursor: pointer;
}

#fn_icon i:hover,
.fn_options_div i:hover {
  opacity: var(--btn_hover_opacity);
}

#fn_icon i:active,
.fn_options_div i:active {
  transform: scale(1.2); /* زيادة حجم العنصر بنسبة 10% */
}

.fn_main_button {
  position: relative;
  border-radius: 50%;
}

.fn_options_div {
  position: relative;
  display: flex; flex-direction: column; justify-content: start; align-items: center;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  padding: 0.5rem;
  /* border: var(--border_normal); */
  /* background-color: var(--input_text_background_color); */
  color: var(--Font_Color);
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out,
    background-color 0.5s ease 0s, color 0.5s ease 0s, box-shadow 0.5s ease 0s,
    border 0.5s ease 0s, opacity 0.5s ease, transform 0.5s ease;
  overflow: hidden;
  border: var(--border_normal);
  background-color:  var(--bg_content_space);
  transition: var(--transition);
}

.fn_options_div div{
  position: relative;
  display: flex; flex-direction: row; justify-content: start; align-items: center;
  padding: 0.5rem ;
  height: 3.5rem;
  min-width: 5rem;
  width: 100%;
  cursor: pointer;
  /* border-block-end: var(--border_normal); */
  background-color: inherit;
  transition: var(--transition);
  border-radius: 0.3rem;
  font-weight: bold;
}

.fn_options_div div:hover{
  background-color: var(--hover_btn_color);
}

.fn_options_div div:active{
  transform: scale(1.1);
}

@media print {
  #fn_icon i,
  .fn_options_div {
    display: none;
  }
}

.info_div_with_normal_nput{
  position: relative;
  display: flex;
  flex-direction: row; justify-content: start; align-items: center;
  /*❌ margin-block-start: 1rem; mat3msh ay margin 5alek padding */
  padding-block-end: 1rem;

}
.info_div_with_normal_nput input,
.info_div_with_normal_nput textarea,
.info_div_with_normal_nput span{
  margin: 0;
}
.info_div_with_normal_nput div{
  margin: 0;
  padding: 0;
}

.info_div_with_normal_nput .inf_btn,
.info_div_with_normal_nput .x_btn,
.info_div_with_normal_nput .tel_btn{
  /*❌ margin-inline-start: 1rem; */
  padding-inline-start: 1rem;
}


.inf_btn,
.x_btn,
.tel_btn {
  /* color: var(--Font_Color); */
  cursor: pointer;
  /* box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.3); تأثير الظل */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.inf_btn,
.tel_btn {
  pointer-events: auto !important; /* lazem 3ashan fumction viewMode bet3mel lock le el page_content */
}

.tel_btn{
  color: var(--btn_save_backcolor);
}

.inf_btn,
.x_btn{
  color: gray;
}

.inf_btn:hover,
.x_btn:hover,
.tel_btn:hover{
  transform: translateY(-0.4rem); /* تأثير البروز عند التمرير */
  /* box-shadow: 0 1.2rem 2rem rgba(0, 0, 0, 0.4); تأثير الظل عند التمرير */
  opacity: var(--btn_hover_opacity);
}

.inf_btn:active,
.x_btn:active,
.tel_btn:active {
  transform: translateY(0.2rem); /* تأثير الضغط على الزر */
  /* box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.3); تقليل الظل عند الضغط */
   transform: scale(1.1)
}



.custom_setting_button {
  background: linear-gradient(to bottom, #bebebe, #808080); /* تغميق الألوان */  
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  padding: 0.5rem; /* طول كبير وعرض صغير */
  border: none;
  margin: 0.5rem;
  border-radius: 50%;
  box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.3); /* تأثير الظل */
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  opacity: 0.9;
}

.custom_button {
  /* background: linear-gradient(to bottom, #d1d1d1, #a0a0a0); */
  background: linear-gradient(to bottom, #bebebe, #808080); /* تغميق الألوان */  
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 1.2rem 1rem; /* طول كبير وعرض صغير */
  border: none;
  margin: 0.5rem;
  border-radius: 0.3rem;
  /* box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.3); تأثير الظل */
  box-shadow: 0 0 0.3rem var(--Font_Color_Shadow);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}


.custom_button:hover,
.custom_setting_button:hover,
#scrollToTopBtn:hover{
  transform: translateY(-0.4rem); /* تأثير البروز عند التمرير */
  box-shadow: 0 1.2rem 2rem var(--Font_Color_Shadow); /* تأثير الظل عند التمرير */
}

.custom_button:active,
.custom_setting_button:active,
#scrollToTopBtn:active {
  transform: translateY(0.2rem); /* تأثير الضغط على الزر */
  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.3); /* تقليل الظل عند الضغط */
}


.dropdown_table_tr.focused {
  background-color: var(--table_row_alternative_background_color_while_hover) !important;
  color: var(--table_row_alternative_color_while_hover) !important;
}


.tfoot_totalDiv_note,.tfoot_totalDiv_Values{
  position: relative;
  display: flex; flex-direction: column;
  gap: 1rem;
  width: 100%;
  height: fit-content;
  color: var(--Font_Color);
  transition: var(--transition);
}

.tfoot_totalDiv_note{
  margin-block-start: 1rem;
  justify-content: start !important;
  align-items: end !important;
  padding: 0.5rem;
}

.td_currencySymbol_class{
  color: darkorange;
  font-weight: normal;
  padding-inline-start: 0.5rem;
}

.tfoot_totalDiv_Values{
  margin-block-start: 1rem;
  justify-content: start;
  /* align-items: center; */
  align-items: start;
  padding: 0.5rem;
}


.reference_status{
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 1rem;
}


.dialogx_div_for_2_dates{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  margin-block-end: 1rem;
  width: 100%;
  gap: 1rem;
}

.dialogx_div_for_2_dates .date_div{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  flex-wrap: wrap;
  width: fit-content;
}

.dialogx_checkbox_div{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  white-space: nowrap;
  white-space: nowrap;
  height: var(--input_height);
  width: fit-content;
  background-color: var(--btn_search_backcolor);
  color: var(--btn_search_color);
  padding: 0.8rem;
  margin-block-end: 1rem;
  height: var(--input_height);
  border: var(--border_normal);
  border-radius: 0.3rem;
  gap: 1rem;
  transition: var(--transition);
}

.td_number_container_div{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  min-height: 100%;
  height: 100%;
  min-width: 100%;
  width: fit-content;
}

.report_main_container{
  position: relative;
  display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 1.3rem; flex-wrap: wrap;
  padding: 1rem;
}

.report_contaner_div{
  position: relative;
  display: flex; flex-direction: column; justify-content: start; align-items: start;
  padding: 1rem;
  border: var(--border_normal);
  border-radius: 1rem;
  box-shadow: var(--box_shadow_border);
  transition: var(--transition);
}

.report_inside_div{
  position: relative;
  display: flex; flex-direction: column; justify-content: start; align-items: start;
  gap: 1rem;
  padding-inline-start: 2rem;
  padding-inline-end: 2rem;
  padding-block-start: 1rem;
  padding-block-end: 1rem;
  list-style-type: disc; /* إضافة هذه الخاصية لعرض النقاط */
  color: var(--Font_Color);
  background-color: inherit;
  transition: var(--transition);
}


.report_row {
  position: relative;
  /* display: list-item;  */
  /* font-size: var(--font_size_normal); */
  font-size: 1.5rem;
  color: var(--Font_Color);
  background-color: inherit;
  cursor: pointer;
  transition: var(--transition);
  text-align: start;
}

.report_row:hover {
  color: orange;
  transform: scale(1.02);
}

.normal_lbl {
    position: relative;
  display: inline-block;
  word-wrap: normal;
  /* التفاف النص  */
  display: block;
  font-weight: bold;
  font-size: 1.5rem;
  width: fit-content;
  /* margin-inline-start: 0.5rem; */
  padding-block-end: 0.8rem;
  /* margin-block-start: 0.7rem; */
  /* color: var(--Font_Color); */
  /* color: var(--h2_color); */
  /* color: darkorange; */
  color: var(--reports_not_final_account_color);

  transition: var(--transition);
}

.report_lbl_sm,
.report_lbl_sm_without_underline {
  position: relative;
  display: inline-block;
  word-wrap: normal;
  /* التفاف النص  */
  display: block;
  font-weight: bold;
  font-size: 1.5rem;
  width: fit-content;
  /* margin-inline-start: 0.5rem; */
  margin-block-end: 0.8rem;
  margin-block-start: 0.7rem;
  /* color: var(--Font_Color); */
  /* color: var(--h2_color); */
  /* color: darkorange; */
  color: var(--reports_not_final_account_color);

  transition: var(--transition);
}
@media print {
  .report_lbl_sm {
    text-decoration: underline !important;
  } 
}


.sss{
  background-color: teal;
}

/* حركة توهج متغيرة مع تكبير خفيف */

.header1{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  padding-inline-start: 1rem;
  font-weight: bold;
}

.disabled_class {
  pointer-events: none; /* يمنع أي كليك أو تفاعل */
  opacity: 0.6;         /* شكل العنصر باهت */
}


@media print {
  /* إعدادات عامة للصفحة */



  /* تنسيق الجدول للطباعة */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 0.1rem solid #000 !important;
    border-radius: 0.3rem !important;
    page-break-inside: auto !important;
  }

  thead {
    display: table-header-group !important; /*تكرار الهيدر فى كل الصفحات*/
  }

  tfoot {
    display: table-footer-group !important; 
  }

  tr {
    page-break-inside: avoid !important; /*منع انقسام الصف الى نصفين فى الاخر لو كان المساحه مش كافيه*/
    page-break-after: auto !important;
    height: 0.5rem !important;
  }

  th,
  td {
    border: 0.1rem solid #000 !important;
    border-collapse: collapse !important;
    padding: 0.5rem 0.5rem !important;
    /* text-align: center !important; */
    /* vertical-align: middle !important; */
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-align: start !important;
    height: 0.5rem !important;
  }

  th,
  .footer_row td,
  .table_totals_row td{
    background-color: whitesmoke !important;
  }
  td * {
    all: unset !important; /* إزالة كل التنسيقات الافتراضية */
    display: inline-block !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    color: #000 !important;
    font-size: inherit !important;
    text-align: start !important;
    height: fit-content !important;
  }

  .table_totals_row td,
  .footer_row td {
    /* border: none !important; */
    font-weight: bold !important;
  }

.tfoot_totalDiv_note{
  text-align: end !important;
  padding-inline-end: 1rem !important;
  width: 100% !important;
}

.total_div_row_footer_table{
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 0.5rem !important;
  justify-content: start !important;
  align-items: center !important;
}
}

.column_gap10{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: start !important;
  align-items: start !important;
  gap: 1rem;
  margin-block-end: 1rem !important;
}


.history_div{
  position: relative;
  pointer-events: auto !important; /* lazem 3ashan fumction viewMode bet3mel lock le el page_content */
  margin-block-start: 1rem;
  padding: 2rem 1rem 1rem 1rem;
  width: fit-content;
  /* max-width: 100%; ❌*/ 
  /* max-width: 100vw;  ❌*/
  height: fit-content;
  max-height: 30rem;
  overflow: auto;
  border-block-start: 0.1rem solid rgba(180, 180, 180, 0.7); /* لون رمادي خافت للحدود */
  /* box-shadow: 0 0.1rem 0.2rem rgba(255, 255, 255, 0.3); ظل خفيف لإعطاء تأثير الحفر */
  color: var(--Font_Color);
  opacity: 0.8; /* قيمة بين 0 و 1 حيث 0 هو شفاف تماماً و1 هو معتم تماماً */
}
.comment_table{
  position: relative;
  width: fit-content;
  height: fit-content;
  transition: var(--transition);
}


.comment_table th,
.comment_table td {
  padding: 0.3rem;
}


.editor {
  max-width: 100%;
  height: 300rem !important; /* غير الرقم ده حسب ما يناسبك */
  border: 0.1rem solid #ddd;
}

#status_ribbon{
  display: none; /*DEAFULT*/
  position: fixed !important;
  inset-block-start: 7.8rem;
  inset-inline-end: 4.5rem;
  /* background: linear-gradient(145deg, #4a90e2, #357ab8); */
  color: white;
  padding: 0.5rem 1rem;
  /* transform: rotate(-45deg); */
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.3);
  font-weight: bold;
  letter-spacing: 0.1rem;
  /* transition: background 0.3s ease-in-out, transform 0.3s ease-in-out; */
  transition: var(--transition);
  animation: slideIn 0.8s ease-out forwards;
  border-radius: 0.3rem;
  z-index: 5;
}


.status_ribbon_blue {
 background-color: var(--btn_new_backcolor);
}

.status_ribbon_green {
 background-color: var(--btn_save_backcolor);
}

.status_ribbon_orange {
 background-color: var(--btn_update_backcolor);
}

.status_ribbon_red {
 background-color: var(--btn_delete_backcolor);
}

.status_ribbon_teal {
 background-color: var(--btn_teal_backcolor);
}

/*
.status-ribbon:hover {
  transform: scale(1.1);
}
*/

/* Optional animation entrance */
@keyframes slideIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


.hide_draft_mode_elements {
  display: none !important;
}

.draft_btns_div{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  padding: 0 0 0 0;
  margin-inline-end: 1rem;
  border: none;
  box-sizing: border-box;
  border-inline-end: var(--h2_border_bottom) ;
}

.icon_button_start_with_fixed_color,
.icon_button_end_with_fixed_color {
font-size: 1.4rem;
color: var(--btn_color);
}

.icon_button_start_with_fixed_color{
margin-inline-end: 0.6rem;
}

.icon_button_end_with_fixed_color{
margin-inline-start: 0.6rem;
}


#financial_position_container_main_div {
  position: relative;
  display: flex;        /* يفعل الفلكس */
  flex-direction: row;
  justify-content: start;
  align-items: start;
  flex-wrap: wrap;            /* يسمح للديفين بالانتقال للسطر التالي لو المساحة مش كفاية */
  gap: 3rem;                  /* مسافة بسيطة بين الديفين */
  width: 100%;
  height: 100%;
  padding-block-start: 1rem;

}

#financial_position_container_main_div > div {
  /* flex-grow: 1;       يكبر العنصر لو في مساحة فاضية بالسطر */
  /* flex-shrink: 1;     يسمح للعنصر إنه يصغر لو المساحة مش كفاية */
  /* flex-basis: 45%;    العرض المبدئي للعنصر 45% من مساحة الحاوية */

  display: flex;      /* يخلي محتوى الديف نفسه يستخدم فلكس */
  justify-content: start;  /* يوسّط المحتوى أفقياً داخل الديف */
  align-items: start;      /* يوسّط المحتوى عمودياً داخل الديف */
  
  min-width: 30rem;   /* أقل عرض ممكن للعنصر قبل ما ينزل تحت */
}


/* نبض ناعم */
.attention_pulse {
  animation: smoothPulse 0.5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes smoothPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}
.has_pointer_ar::before {
  content: "👈";
}

.has_pointer_en::before {
  content: "👉";
}

.has_pointer_ar::before,
.has_pointer_en::before {
  display: inline-block;
  margin-inline-end: 0.3rem; /* 👈 مسافة بسيطة قبل النص */
  font-size: 1.3em;
  /* vertical-align: middle; 👌 علشان الإيموجي يكون مظبوط مع النص */
  animation: pointerHorizontalShake 1.3s ease-in-out infinite;
}

/* حركة اهتزاز أفقي ناعمة */
@keyframes pointerHorizontalShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

.red_text {
  color: var(--red_color);

  /* -webkit-text-stroke: 0.5px white;
  paint-order: stroke fill; */
}

.line_through {
  text-decoration: line-through;
}

.filled_table_barcode_span_color {
  color: var(--filled_table_barcode_span_color) !important;
}



@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255,0,0,0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
  }
}

#notifications_number_btn {
    position: absolute;
    inset-block-start: 0.9rem;
    inset-inline-start: 1.9rem;

    background-color: red;
    color: white;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    height: 1.9rem;
    min-width: 1.9rem;
    padding: 0 0.6rem;

    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1;

    text-align: center;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* الكلاس اللي هيعمل النبضة */
.pulse-animation {
  /*notifications_number_btn*/

    /*👉 speed 1sec - repet 3 time */
    /* animation: pulse 1s ease-in-out 3; */

    /*👉 speed 0.5sec - repet infinite */
    animation: pulse 0.5s ease-in-out infinite;
}

#notifications_review_table {
  border-collapse: collapse !important;
  border: none !important;
}

#notifications_review_table * {
  border: none !important;
}
#notifications_review_table .notifications_row_settings_div.border {
  border: var(--border_normal) !important;
}
#notifications_review_table .notifications_row_settings_div.border.hover:hover {
  border: var(--border_normal_hover) !important;
}


  .btn_101 {
    padding: 0.5rem;
    background-color: gray;
    color: var(--Font_Color);
  }

.attachment_fieldset {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  white-space: wrap;
  align-items: start;
  height: fit-content;
  width: 100%;
  border: var(--border_normal);
  border-radius: 0.6rem;
  padding: 1rem;
  margin-block-start: 1rem;
  margin-block-end: 1rem;
  transition: var(--transition);
}


.attachment_fieldset legend {
  color: var(--Font_Color);
  transition: var(--transition);
}

.attachment_content_div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  flex-wrap: wrap;
  align-items: start;
  height: fit-content;
  width: 100%;
  gap: 1rem;
  transition: var(--transition);
}

.bold {
    font-weight: bold;
    color: #000; /* ممكن تختار لون مناسب */
}

.amount_container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 5px; /* مسافة بسيطة بين "المبلغ:" والقيمة */
    font-size: 16px; /*  laze, tkon px 3ashan da A4 */
}

.fraction {
    font-size: 0.9em;
    vertical-align: middle;
}
.fraction sup {
    vertical-align: super;
    font-size: 0.7em;
}
.fraction sub {
    vertical-align: sub;
    font-size: 0.7em;
}



/*🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴*/

.hover:hover {
  border: var(--border_normal_hover) !important;
  outline: 0;
}

/* END CSS */
@media print {
  .bold_in_print {
    font-weight: bold !important;
  }

  .td_tfoot_totalDiv_note {
    text-align: center !important;
  }
  .tfoot_totalDiv_note{
    /* margin-block-start: 1rem !important; */
    display: flex !important;
    flex-direction: column !important;
    justify-content: start !important;
    align-items: end !important;
    padding: 0.5rem !important;
    margin: 0 !important;
  }

  .border_none_on_print{
    border: none !important;
    box-sizing: border-box !important;
  }

  .zero_style_on_print {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    white-space: pre-line !important;
    word-break: break-word !important;
    width: 100% !important;
  }
  .reference_and_date_div{
    margin-block-end: 0.5rem !important;
  }

}

.div_converted_from_input_on_print {
  display: flex !important;
  flex-direction: row !important;
  justify-content: start !important;
  align-items: center !important;
  width: fit-content !important;
  border: none !important;
  padding-inline-start: 10px !important; /* ⛔ hena lazem px 3ashan de print paper msh screen */
  padding-inline-end: 10px !important; /* ⛔ hena lazem px 3ashan de print paper msh screen */
  background-color: white !important;
  color: black !important;
}

.ta7ded1 {
  border: var(--red_color) solid 0.1rem !important;
}

.ta7ded2 {
  border: blue solid 0.1rem !important;
}

.ta7ded3 {
  border: green solid 0.1rem !important;
}