/* تحسين شكل شريط التمرير للـ iframe */
#noteIframe_1 {
    width: 100%; /* تأكد من أن العرض 100% */
    height: 650px; /* ارتفاع الـ iframe */
    border: none; /* إزالة الحدود */
}

/* تخصيص شريط التمرير */
#noteIframe_1::-webkit-scrollbar {
    width: 12px; /* عرض شريط التمرير */
}

#noteIframe_1::-webkit-scrollbar-track {
    background: #f1f1f1; /* لون خلفية شريط التمرير */
    border-radius: 10px; /* زوايا دائرية */
}

#noteIframe_1::-webkit-scrollbar-thumb {
    background: #888; /* لون شريط التمرير */
    border-radius: 10px; /* زوايا دائرية */
}

#noteIframe_1::-webkit-scrollbar-thumb:hover {
    background: #555; /* لون شريط التمرير عند التمرير عليه */
}

    /* Offcanvas styles */
    .offcanvas {
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0; /* because dir rtl */
      width: 300px;
      background-color: white;
      color: black;
      box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3);
      transform: translateX(100%);
      transition: transform 0.3s ease;
      z-index: 1050;
      padding-top: 1rem;
      display: flex;
      flex-direction: column;
    }

    .offcanvas.show {
      transform: translateX(0);
    }
    .navbar-nav .nav-item {
       margin-right: 10px; /* إضافة مسافة بسيطة بين العناصر */
       font-size: 15px;
     }

    .offcanvas-header {
      padding: 1rem 1.5rem;
      font-size: 1.5rem;
      font-weight: 700;
      border-bottom: 1px solid #d7dfe6;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .offcanvas-body {
      flex: 1;
      overflow-y: auto;
      padding: 1rem 1.5rem;
    }

    .offcanvas-body ul {
      list-style: none;
      padding-left: 0;
      margin: 0;
    }

    .offcanvas-body ul li {
      padding: 0.65rem 0;
      border-bottom: 1px solid #495057;
    }

    .offcanvas-body ul li a {
      color: #adb5bd;
      text-decoration: none;
      display: block;
      font-size: 1.15rem;
      transition: color 0.3s ease;
    }

    .offcanvas-body ul li a:hover,
    .offcanvas-body ul li a:focus {
      color: #17a2b8;
      text-decoration: none;
    }

    /* Overlay styles */
    .overlay {
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease;
      z-index: 1040;
    }

    .overlay.show {
      opacity: 1;
      visibility: visible;
    }

    /* Toggle button styles */
    .offcanvas-toggle-btn {
  border-left: thick solid #ff0000;
	  writing-mode: vertical-rl; /* لعرض النص عمودياً */
      position: fixed;
      margin-top:27%;
      top: 1rem;
      left: 1rem;
      z-index: 1100;
      background-color: #17a2b8;
      border: none;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 0.3rem;
      font-size: 1rem;
      box-shadow: 0 4px 8px rgba(23, 162, 184, 0.5);
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .offcanvas-toggle-btn:hover,
    .offcanvas-toggle-btn:focus {
      background-color: #117a8b;
      outline: none;
    }

    main.container {
      margin-top: 5rem;
      text-align: center;
      max-width: 900px;
    }
#loading {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh;
  background: linear-gradient(90deg, rgba(125, 150, 240, 1) 0%, rgba(250, 250, 250, 1) 50%, rgba(83, 111, 237, 1) 100%);
  position: fixed; 
  width: 100%; z
 -index: 9999;
}
	  .container {
           width: 100%; /* أو أي قيمة أكبر تناسب تصميمك */
           max-width: 1150px; /* تحديد الحد الأقصى للعرض */
           margin: 0 auto; /* توسيط الـ container */
       }
	   
    #toggleSidebar {
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      background-color: black; /* لون الخلفية */
      color: white; /* لون النص */
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    #toggleSidebar:hover {
      background-color: gray; /* لون الخلفية عند التمرير */
    }