/* Apply box-sizing: border-box to all elements to include padding and border in the element's total width and height */
* {
  box-sizing: border-box;
}

/* Style for the body element */
body {
  background-color: #121212; /* Dark background color */
  color: #ffffff; /* White text color */
  font-family: Arial, sans-serif; /* Font family */
  margin: 0; /* Remove default margin */
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack children vertically */
  height: 100vh; /* Full viewport height */
  position: relative; /* Ensure the body can contain absolutely positioned elements */
}

/* Style for the main container */
.container {
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center children horizontally */
  padding: 20px; /* Add padding around the container */
  flex-grow: 1; /* Allow the container to grow and take available space */
  width: 100%; /* Full width */
}

/* Style for the top bar */
.top-bar {
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Space children evenly */
  align-items: center; /* Center children vertically */
  width: 100%; /* Full width */
  margin-bottom: 20px; /* Add margin below the top bar */
}

/* Style for buttons and text inputs in the top bar */
.top-bar button,
.top-bar input[type="text"],
.top-bar select {
  margin: 0 10px; /* Add horizontal margin */
}

/* Style for the main content area */
.content {
  display: flex; /* Use flexbox for layout */
  width: 100%; /* Full width */
  justify-content: space-between; /* Space children evenly */
  flex-grow: 1; /* Allow the content area to grow and take available space */
  margin-bottom: 20px; /* Add margin below the content area */
}

/* Style for the panels (left and right) */
.panel {
  width: 25%; /* Set width */
  height: 90%; /* Set height */
  padding: 10px; /* Add padding */
  background-color: #333333; /* Dark background color */
  border-radius: 20px; /* Rounded corners */
  overflow-y: auto; /* Enable vertical scrolling if content overflows */
}

/* Ensure panels are always visible */
.panel.hidden-content {
  display: block; /* Ensure the panel is visible */
}

/* Style for the photo display area */
.photo-display {
  width: 55%; /* Set width */
  height: 90%; /* Set height */
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Space children evenly */
}

/* Style for individual photo containers */
.photo {
  width: 48%; /* Set width */
  height: 90%; /* Set height */
  text-align: center; /* Center text */
  position: relative; /* Ensure the container can contain absolutely positioned elements */
  display: block; /* Display photos as block elements */
}

/* Style for images within photo containers */
.photo img {
  max-width: 100%; /* Ensure images do not exceed container width */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Ensure images are displayed as block elements */
}

/* Style for labels within photo containers */
.photo label {
  display: block; /* Display labels as block elements */
  margin-top: 10px; /* Add margin above labels */
}

/* Style for question containers */
.question {
  display: block; /* Display questions as block elements */
  margin: 10px; /* Add margin */
  margin-bottom: 25px; /* Add margin below questions */
}

/* Style for the submit bar */
.submit-bar {
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Center children horizontally */
  align-items: center; /* Center children vertically */
  width: 100%; /* Full width */
  margin-top: 20px; /* Add margin above the submit bar */
}

/* Style for buttons in the submit bar */
.submit-bar button {
  margin: 10px; /* Add margin around buttons */
  padding: 10px 20px; /* Add padding inside buttons */
  border-radius: 20px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor */
  background-color: #535353; /* Dark background color */
  color: #ffffff; /* White text color */
  border: none; /* Remove border */
}

/* Style for buttons on hover */
.submit-bar button:hover {
  background-color: #333333; /* Change background color on hover */
}

/* Style for headings generated by GrapesJS */
.gjs-heading {
  margin: 0; /* Remove default margin */
}

/* Hide the file input */
#upload-input {
  display: none; /* Hide the element */
}

/* Style for the content area with id ik2x2x */
#ik2x2x {
  padding-top: 0px; /* Remove top padding */
  padding-right: 0px; /* Remove right padding */
  padding-bottom: 53px; /* Add bottom padding */
  padding-left: 0px; /* Remove left padding */
}

/* Style for the container with id i9acb5 */
#i9acb5 {
  padding-top: 0px; /* Remove top padding */
  padding-right: 0px; /* Remove right padding */
  padding-bottom: 0px; /* Remove bottom padding */
  padding-left: 0px; /* Remove left padding */
}

/* Style for the heading with id ijiumj */
#ijiumj {
  position: static; /* Static positioning */
  text-align: center; /* Center text */
}

/* Style for the upload button */
#upload-button {
  border-radius: 20px; /* Rounded corners */
  margin: 15px 5px 10px 5px; /* Add margin */
  padding: 10px 20px; /* Add padding */
  background-color: #535353; /* Dark background color */
  color: #ffffff; /* White text color */
  border: none; /* Remove border */
  cursor: pointer; /* Pointer cursor */
}

/* Style for the initials submit button */
#initials-submit {
  border-radius: 20px; /* Rounded corners */
  margin: 10px 5px 10px 5px; /* Add margin */
  padding: 10px 20px; /* Add padding */
  background-color: #535353; /* Dark background color */
  color: #ffffff; /* White text color */
  border: none; /* Remove border */
  cursor: pointer; /* Pointer cursor */
}

/* Style for the export button */
#export {
  border-radius: 20px; /* Rounded corners */
  margin: 10px 10px 10px 10px; /* Add margin */
  padding: 10px 20px; /* Add padding */
  background-color: #535353; /* Dark background color */
  color: #ffffff; /* White text color */
  border: none; /* Remove border */
  cursor: pointer; /* Pointer cursor */
}

/* Style for the upload button on hover */
#upload-button:hover {
  background-color: #333333; /* Change background color on hover */
}

/* Style for the left panel with id left-panel */
#left-panel {
  padding-top: 10px; /* Add top padding */
  padding-right: 10px; /* Add right padding */
  padding-bottom: 7px; /* Add bottom padding */
  padding-left: 10px; /* Add left padding */
  margin-top: 0px; /* Remove top margin */
  margin-right: 0px; /* Remove right margin */
  margin-bottom: 75px; /* Add bottom margin */
  margin-left: 0px; /* Remove left margin */
}

/* CSS for single image display */
#image-container.single-image .photo {
  width: 100%; /* Full width */
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Center children horizontally */
}

/* Hide the single photo container by default */
#single-photo {
  display: none; /* Hide the element */
}

/* Display the single photo container when in single-image mode */
#image-container.single-image #single-photo {
  display: block; /* Display the element as a block */
}

/* Hide the left and right photo containers in single-image mode */
#image-container.single-image #left-photo,
#image-container.single-image #right-photo {
  display: none; /* Hide the elements */
}

/* CSS for single OD image display */
#image-container.single-image-od {
  justify-content: flex-end; /* Align content to the right */
}

#image-container.single-image-od #left-photo {
  display: none; /* Hide the left photo */
}

#image-container.single-image-od #right-photo {
  width: 48%; /* Maintain the same width as before */
  display: block; /* Show the right photo */
}

/* Style for the transparent placeholder */
.transparent-placeholder {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
}

/* Style for the logo */
#logo {
  position: absolute; /* Absolute positioning */
  top: 10px; /* Position from the top */
  left: 10px; /* Position from the left */
  width: 75px; /* Set width */
  height: auto; /* Maintain aspect ratio */
  z-index: 1000; /* Ensure the logo appears above other content */
}

/* Style for the footer */
footer {
  text-align: center; /* Center text */
  font-size: 12px; /* Small font size */
  margin-top: 20px; /* Add margin above the footer */
  width: 100%; /* Full width */
  padding: 10px 0; /* Add vertical padding */
  background-color: #121212; /* Match the background color */
  color: #ffffff; /* Match the text color */
}

/* Style for the header */
.header {
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Center children horizontally */
  align-items: center; /* Center children vertically */
  position: static; /* Static positioning */
  margin-bottom: 20px; /* Add margin below the header */
  text-align: center; /* Center the header content */
}

/* Style for the "i" button */
#info-button {
  background-color: #333333; /* Dark background color */
  color: #ffffff; /* White text color */
  border: none; /* Remove border */
  border-radius: 50%; /* Circular shape */
  width: 30px; /* Set width */
  height: 30px; /* Set height */
  font-size: 18px; /* Set font size */
  cursor: pointer; /* Pointer cursor */
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Center children horizontally */
  align-items: center; /* Center children vertically */
  margin-left: 10px; /* Add margin to the left of the button */
}

/* Style for the zoom container */
.zoom-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Style for the zoom image */
.zoom-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* or contain */
  cursor: crosshair;
  transition: 0.2s;
  transform: scale(1);
  transform-origin: 0% 0%;
}

.zoom-img:hover {
  transform: scale(2);
  transition: none;
}

/* Center the reviewer initials textbox and submit initials button */
.top-bar .initials-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.top-bar .initials-container input[type="text"] {
  margin-right: 10px;
}

/* Style for the placeholder text */
.placeholder-text {
  text-align: center; /* Center the text */
  margin-top: 20px; /* Add margin above the placeholder text */
  font-size: 18px; /* Set font size */
  color: #ffffff; /* White text color */
  width: 100%; /* Full width */
}

/* Style for the toggle clinical context button */
#toggle-clinical-context {
  border-radius: 20px; /* Rounded corners */
  margin: 10px 5px 10px 5px; /* Add margin */
  padding: 10px 20px; /* Add padding */
  background-color: #535353; /* Dark background color */
  color: #ffffff; /* White text color */
  border: none; /* Remove border */
  cursor: pointer; /* Pointer cursor */
  width: 300px; /* Set width */
}

/* Style for the toggle clinical context button on hover */
#toggle-clinical-context:hover {
  background-color: #333333; /* Change background color on hover */
}

/* Adjust the layout of the top bar */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.top-bar .upload-container {
  display: flex;
  align-items: center;
}

.top-bar .upload-container button {
  margin-right: 20px;
}

.top-bar .initials-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.top-bar .initials-container input[type="text"] {
  margin-right: 10px;
}

/* Adjust the layout of the submit bar */
.submit-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: -50px; /* Move the submit bar up */
}

/* Style for the "Load Examples" button */
#loadExamplesButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto; /* This ensures horizontal centering */
  border-radius: 20px; /* Rounded corners */
  padding: 10px 20px; /* Add padding */
  text-align: center; /* Center text */
  background-color: #535353; /* Dark background color */
  color: #ffffff; /* White text color */
  border: none; /* Remove border */
  cursor: pointer; /* Pointer cursor */
  width: 140px;
}

/* Style for the "Load Examples" button on hover */
#loadExamplesButton:hover {
  background-color: #333333; /* Change background color on hover */
}