#fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 99999999999;
}
#loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#canvasContainer {
  position: relative; 
}
#loading2 {
  display: none; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center; 
  justify-content: center; 
  z-index: 10;
}

#loadingText {
  color: white; 
  font-size: 2em;
  text-align: center; 
}
canvas {
  display: block;
  z-index: 1; 
}
#khara2 .button {
  display: inline-block; 
  margin-right: 5px; 
}
.zoma {
    color: white;            /* White text */
    background-color: red;   /* Red background */
    padding: 5px 5px;       /* Padding around the text */
    border-radius: 5px;      /* Optional: Rounded corners */
    display: inline-block;   /* Ensures the background spans the label content */
    margin-left: 5px;       /* Space between the label and whatever is to its left */
	margin-top: 4px;
	font-family: 'Times New Roman', Times, serif;

}
#toto .button {
  display: inline-block; 
  margin-right: 5px; 
}
.file-upload-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.file-upload-button {
  border: 2px solid #007bff;
  color: white;
  background-color: #007bff;
  padding: 8px 200px; /* Use smaller padding */
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  text-align: center; /* Center the text inside the button */
  display: inline-block; /* Allows the width to fit content */
  width: auto; /* Default to content width */
  min-width: 120px; /* Minimum width */
  box-sizing: border-box; /* Make sure padding doesn't affect the total width */
}

/* Use media queries for different screen sizes */
@media (max-width: 768px) {
  .file-upload-button {
    padding: 8px 15px; /* Smaller padding on smaller screens */
    font-size: 14px; /* Smaller font size on smaller screens */
  }
}

@media (max-width: 480px) {
  .file-upload-button {
    padding: 8px 10px; /* Even smaller padding on very small screens */
    font-size: 12px; /* Even smaller font size on very small screens */
    min-width: 200px; /* Adjust minimum width for very small screens */
  }
}


.file-upload-button:hover {
  background-color: #0056b3;
}

#file-chosen {
  margin-left: 10px;
  font-family: sans-serif;
}
/* Styles for Cropper Modal */
/* Styles for Cropper Modal */
.modal {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 100% of viewport width */
  height: 100%; /* 100% of viewport height */
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  z-index: 999999999999999;
  overflow: hidden;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
   z-index: 999999999999999;
   overflow: hidden;
}

/* أنماط للشاشات التي عرضها 769px فما فوق */
@media (min-width: 769px) {
  .cropper-container {
    max-height: 400px; /* تعيين العرض الأقصى للمحتوى */
    width: 100%; /* تعيين الارتفاع تلقائيًا */
    /* z-index ليس ضروريًا هنا إلا إذا كان هناك تداخل معين تريد التحكم فيه */
  }
}

/* أنماط للشاشات التي عرضها بين 310px و 768px */
@media (min-width: 310px) and (max-width: 768px) {
  .cropper-container {
    max-height: 280px; /* تعيين العرض الأقصى للمحتوى */
    width: 100%; /* تعيين الارتفاع تلقائيًا */
    /* تعديل القيمة حسب التصميم المطلوب */
  }
}

/* أنماط للشاشات التي عرضها أقل من 310px */
@media (max-width: 309px) {
  .cropper-container {
    max-height: 200px; /* تعيين العرض ليكون 100% من عرض الوالد */
    width: 100%; /* تعيين الارتفاع تلقائيًا */
    /* تعديل القيمة حسب التصميم المطلوب */
  }
}
.button-container {
  text-align: center;
}

/* Styles for Fullscreen Overlay */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  max-width: 600px; /* Set your desired maximum width */
    max-height: 600px; /* Set your desired maximum height */
  width: 100%; /* 100% of viewport width */
  height: 100%; /* 100% of viewport height */
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  z-index: 9998; /* One less than the modal z-index to appear below it */
}



.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Parent element */

.close-button {
    cursor: pointer;
    background-color: #f44336; /* Red background */
    color: white; /* White text */
    border: none; /* No border */
    padding: 10px 20px; /* Padding around text */
    text-align: center; /* Center text */
    text-decoration: none; /* No underline */
    display: inline-block; /* Allows setting of width and height */
    font-size: 16px; /* Set font-size */
    margin: 4px 2px; /* Spacing around button */
    transition-duration: 0.4s; /* Smooth transition for hover effect */
    border-radius: 5px; /* Rounded corners */
}

.close-button:hover {
    background-color: white;
    color: #f44336; /* Red text */
}
.button-container {
    display: flex; /* This will arrange child elements (buttons) in a row */
    justify-content: space-around; /* This will add space around the buttons */
    padding: 10px; /* Add padding as needed */
}

.button {
    padding: 10px 20px; /* Add padding inside the buttons for better appearance */
    margin: 5px; /* Add some margin between buttons */
    /* Add other styles like background-color, color, border, etc. */
}
.cropper-hidden {
  touch-action: none;
}
.body-lock {
  overflow: hidden; /* منع التمرير */
}