* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul, ol {
  margin-top: 0; /* Reduce margin above lists */
}

body, html {
  width: 100vw;
  height: 100vh;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: 1.458vw; /* 14px to vw */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; /* Adjust based on your preference for boldness */
}
#loginPage {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  background-image: url('images/Anttu_tausta.png');
  background-size: cover; /* Ensure the entire image fits within the container */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-position: center; /* Center the background image */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1002;
}
.login-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 5vh; /* 40px to vh */
    border-radius: 1vw; /* 10px to vw */
    background-color: #A7D5E2;
    backdrop-filter: blur(1.042vw); /* 10px to vw */
    border: 0.104vw solid rgba(255, 255, 255, 0.18); /* 1px to vw */
    box-shadow: 0 0.521vh 0.781vh rgba(0, 0, 0, 0.1); /* 0 4px 6px to vh */
    color: #575757;
    width: 35vw;
    height: auto;
}
.login-container h2 {
  margin-bottom: 2.6vh; /* 20px to vh */
  font-size: 2.5vh;
}

#loginKey, #usernameInput {
  width: calc(100% - 2vw); /* 20px to vw */
  padding: 0.5vw; /* 10px to vw */
  margin-bottom: 1vw; /* 20px to vw */
  border: none;
  border-radius: 0.5vw; /* 5px to vw */
  box-shadow: inset 0 0.5vh 1vh rgba(0, 0, 0, 0.1); /* 0 2px 4px to vh */
  font-size: 0.9vw;
}
#loginKey::placeholder, #usernameInput::placeholder {
  font-size: 0.9vw; /* 16px to vw */
  color: #575757; /* Optional: you can also change the placeholder text color */
}
#loginKey:disabled {
  background-color: white;
}
#loginButton, #startChatButton {
  padding: 0.5vw 1vw; /* 10px 20px to vw */
  border: none;
  border-radius: 0.5vw; /* 5px to vw */
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  font-size: 1vw;
  background: white;
  color: #575757; /* White text color */
  box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

#loginButton:hover, #startChatButton:hover {
  background: #f2f2f2;
  box-shadow: 0 0.8vh 1.2vh rgba(0, 0, 0, 0.25); /* Increased shadow for a 'lifted' effect */
}


#loginLoader {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
#welcomeContainer {
  display: none; /* Keep as is for your JS functionality */
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 5vh; /* 40px to vh */
  border-radius: 1vw; /* 10px to vw */
  background-color: #A7D5E2;
  backdrop-filter: blur(1.042vw); /* 10px to vw */
  border: 0.104vw solid rgba(255, 255, 255, 0.18); /* 1px to vw */
  box-shadow: 0 0.521vh 0.781vh rgba(0, 0, 0, 0.1); /* 0 4px 6px to vh */
  color: #575757;
  width: 35vw;
  height: auto;
}
#welcomeContainer h2 {
  margin-bottom: 2.6vh; /* 20px to vh */
  font-size: 2.5vh;
}
.logo {
  height: 10vh; /* 50px to vh */
  width: auto;
  margin-right: 1vw; /* 10px to vw */
  vertical-align: middle; /* Aligns the logo with the middle of the text */
}
.dropdown-label {
  align-self: flex-start;
  color: #575757;
  display: block;
  left: 0;
  margin-bottom: 0.5vh; /* 5px to vh */
  margin-left: 2.5vh;
  font-size: 1.5vh; /* Adjust as needed */
  font-weight: 500;
}

.dropdown-menu {
  width: calc(100% - 2vw); /* 20px to vw */
  padding: 0.5vw; /* 10px to vw */
  margin-bottom: 1vw; /* 20px to vw */
  border: none;
  border-radius: 0.5vw; /* 5px to vw */
  box-shadow: inset 0 0.5vh 1vh rgba(0, 0, 0, 0.1); /* 0 2px 4px to vh */
  font-size: 0.9vw; /* Adjust as needed */
}

.page-container {
    display: none; /* Hidden by default, shown when active */
    position: absolute; /* Position it on top of everything else */
    top: 0;
    left: 0;
    width: 100vw; /* 100% of the viewport width */
    height: 100vh; /* 100% of the viewport height */
    z-index: 0;
}

#background {
  position: fixed;
  width: 110vw;
  height: 110vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(0.4vw); /* 4px to vw */
  background-color: #A7D5E2;
  z-index: -2;
  top: -5%;
  left: -5%;
  opacity: 1;
}

#overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  opacity: 0;
  transition: opacity 5s;
}

.chat-container {
  position: absolute;
  top: 0;
  left: 16vw; /* Adjust if sidebar width changes */
  width: 84vw; /* Remaining width */
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-left: 8vw;
  padding-right: 8vw;
  padding-bottom: 3vw;
  padding-top: 3vw;
}
.response-container {
  flex: 1;
  overflow: auto; /* Added overflow property */
  color: #575757;
  font-weight: normal;
  font-size: 1vw; /* 1.3rem to vw */
  transition: opacity 0.8s, max-height 1s ease-out, scroll 1s ease-out;
  white-space: pre-wrap;
  z-index: 5;
  display: flex;
  flex-direction: column-reverse; /* Start items from bottom */
  justify-content: flex-start; /* Align items to start from bottom */
  scroll-behavior: smooth;
}
.buttonsContainer {
  flex: 0 0 auto;
  min-height: 5vh;
  margin-top: 0.5vh;
  margin-bottom: 0.1vh;
  display: flex;
  flex-direction: row; /* Align items horizontally */
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  align-items: center;
  gap: 1vh; /* Space between buttons */
  padding-left: 4vh;
  justify-content: flex-start; /* Align items to the left */
  z-index: 100;
}
.input-container {
  flex: 0 0 auto;
  display: flex; /* Helps align children in a row */
  align-items: center; /* Vertically centers the children */
  justify-content: flex-start; /* Aligns children to the start (left side) */
  padding: 0.5vw; /* 10px to vw */
  border: 0.15vw solid rgb(87, 87, 87, 0.6);
  border-radius: 0.5vw; /* 5px to vw */
  box-shadow: inset 0 0.5vh 1vh rgba(0, 0, 0, 0.1); /* 0 2px 4px to vh */
  z-index: 5;
}

.send-button {
  padding: 0.5vw 1vw; /* 5px 10px to vw */
  margin-right: 1vw; /* 10px to vw */
  cursor: pointer;
  background: none; /* Make button background transparent */
  border: none; /* Remove border if you have one */
  color: #575757; /* Set the text color to white */
  font-size: 2.5vh; /* 24px to vh */
  display: flex; /* Use flexbox for centering the icon */
  align-items: center; /* Center the icon vertically */
  justify-content: center; /* Center the icon horizontally */
}
.send-button .fas {
  color: #575757; /* Set the icon color to white */
  font-size: 2.5vh; /* 24px to vh */
}

.user-input {
  caret-color: black;
  flex-grow: 1; /* Allows it to take up available space */
  font-weight: 400;
  font-size: 0.9vw; /* 1.3rem to vw */
  margin-left: 1.6vw; /* 20px to vw */
  width: auto;
  background: transparent;
  border: none;
  outline: none;
  color: #575757;
  font-size: 0.9vw; /* 1.3rem to vw */
  text-align: left;
  z-index: 10;
}



@keyframes slideIn {
  from {
    transform: translateY(2vh); /* 20px to vh */
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide {
  animation: slideIn 0.5s ease-out;
}

#wave {
  display: none;
  margin-top: 1vh; /* 10px to vh */
  opacity: 0;
  transition: opacity 0.5s;
  align-items: center; 
  z-index: 1;
}
.message-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.message-container.user-message {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 1vw; /* 5px to vw */
  margin-bottom: 0.5vh; /* 5px to vh */
  margin-top: 0.5vh; /* 5px to vh */
  padding-bottom: 1vh; /* 5px to vh */
  padding-top: 1vh; /* 5px to vh */
}
.message-container.assistant-message {
  background-color: rgb(255, 255, 255, 0.4);
  border-radius: 1vw; /* 5px to vw */
  margin-bottom: 0.5vh; /* 5px to vh */
  margin-top: 0.5vh; /* 5px to vh */
  padding-bottom: 1vh; /* 5px to vh */
  padding-top: 1vh; /* 5px to vh */
}
.message-header {
  display: flex;
  align-items: center;
}

.user-message {
  background: transparent;
  color: #575757;
  width: 100%;
}

.assistant-message {
  background: transparent;
  color: #575757;
} 

.message-icon {
  margin-left: 0.5vw;
  width: 3vh; /* 35px to vh */
  height: 3vh; /* 35px to vh */
  background-size: cover;
}

.message-name {
  font-size: 1vw; /* 1.4rem to vw */
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  margin-left: 0.5vw; /* 10px to vw */
  margin-right: 1vw; /* 10px to vw */
}

.user-icon {
  border-radius: 50%; /* Makes the icon circular */
  background-color: white; /* Icon background color */
  color: black; /* Icon text color */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4vw; /* 20px to vw */
  font-weight: bold;
}

.assistant-icon {
  background-image: url('images/anttu_icon.png');
}

.message-text {
  padding-left: 4.7vh; /* 45px to vh */
  padding-right: 1vw; /* 10px to vw */
  padding-top: 1vh; /* 10px to vh */
  white-space: pre-wrap;
  line-height: 1.4;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* Internet Explorer and Edge */
  user-select: none; /* Standard syntax */
}
.message-text ul, .message-text ol {
  line-height: 0;
  margin: 0;
  padding: 0;  /* Removes padding around the list */
}
.message-text li {
  margin: 0;  /* Removes default margin around each list item */
  padding: 0; /* Removes padding inside each list item */
  line-height: 1.4; /* Compact line height */
}
.message-text::after {
  content: none;
}

.content-container {
  display: flex;
  justify-content: start; /* Align items to the start */
  align-items: flex-start; /* Align items to the top */
  width: 100%; /* Ensure the container fills the parent width */
}

.assistant-text-container {
  flex-grow: 0; /* Prevent it from growing */
  flex-shrink: 0; /* Prevent it from shrinking */
  width: 100%; /* Adjust this value based on your design */
  /* Ensure this container does not grow or shrink beyond the set width */
}

.image-placeholder {
  margin-top: 5vh;
  flex-grow: 0; /* Prevent it from growing */
  flex-shrink: 0; /* Prevent it from shrinking */
  width: 0%; /* Adjust this value based on your design */
  /* You might want to set a specific height as well */
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  overflow: hidden; /* Hide overflow */
}

/* Add styles for actual image when appended */
.image-placeholder img {
  width: 100%;
  height: auto;
  /* Additional styling as needed */
}

.sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 16vw;
    height: 100vh;
    background: #ffffff;
    color: #030303;
    z-index: 15;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Top container for the logo */
#sidebarTopContainer {
    background-image: url('images/logo.jpg');
    margin-top: 3vh;
    height: 14vh;
    display: flex;
    justify-content: center; /* Center logo horizontally */
    align-items: center; /* Center logo vertically */
    background-color: #ffffff; /* Optional: different background color for visual separation */
    background-size: contain; /* Ensure the entire image fits within the container */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-position: center; /* Center the background image */
}

/* Middle container for the buttons */
#sidebarMiddleContainer {
  height: 43vh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Align the buttons-container to the center */
  align-items: center; /* Center align-items for horizontal centering if needed */
  background: #ffffff;
  padding: 1vw; /* 10px to vw */
}

/* New container for buttons */
.buttons-container {
  width: 100%; /* Take full width of the parent */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the buttons horizontally */
  justify-content: space-around; /* Keeps the original space-around distribution */
  height: 100%; /* Adjust this percentage based on the total height desired for all buttons */
  margin: 2vw; /* Margin around all buttons */
}

.sidebar-btn {
  display: flex;
  align-items: center;
  width: 90%;
  flex-grow: 1; /* Grow to fill the space */
  margin: 0.8vh 0; /* Margin between buttons */
  padding: 0.5vh; /* Padding inside the button */
  background-color: #00B4D5;
  color: white;
  font-size: 2vh;#00adcc;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, color 0.3s;
  border-radius: 1.2vh;
  border: 0.1vw solid #000000;
  font-family: 'Plus Jakarta Sans', sans-serif;
}


.sidebar-btn i {
    margin-right: 1vw; /* 10px to vw */
    margin-left: 0.2vw;
    color: #ffffff; /* Change the icon color */
}

/* Hover effect */
.sidebar-btn:hover {
    background-color: rgb(0, 72, 117);
    color: #ffffff; /* Slightly change text color for better contrast */
    transform: scale(1.10); /* Slightly increase size */
}
/* Active button styling */
.sidebar-btn.active {
    background-color: rgb(0, 72, 117);
    color: #EEE;
    transform: scale(1.10);
}

.sidebar-btn.active i {
    color: #ffffff;
}

/* Bottom container for the avatar */
#sidebarBottomContainer {
  height: 40vh;
  width: 100%;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center; /* Center avatar horizontally */
  align-items: center; /* Center avatar vertically */
}

#avatar {
  max-height: 40vh; /* Use max-height to ensure it doesn't exceed the container height */
  max-width: 100%; /* Ensures the width does not exceed the container width */
  width: auto;  /* Maintain the image's aspect ratio */
  height: auto; /* Adjust height automatically */
}

#loadingIndicator {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 58%;
}
.loading-indicator {
    display: none; /* Initially hidden */
    position: fixed; /* Fixed position */
    align-items: center;
    justify-content: center;
    z-index: 1500; /* Ensure it's above other content */
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 30px; /* Adjusted for visibility */
    height: 30px;
    border-radius: 50%;
    border-left-color: #17A8F9;
    animation: spin 1s ease infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes dotDance {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}

.dancing-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #17A8F9;
  margin: 0 2px;
  animation: dotDance 1.4s infinite ease-in-out both;
}

.dancing-dots span:nth-child(1) { animation-delay: -0.32s; }
.dancing-dots span:nth-child(2) { animation-delay: -0.16s; }
.dancing-dots span:nth-child(3) { animation-delay: 0; }


/* Initial state: scrollbar hidden */
body.hidden-scrollbar ::-webkit-scrollbar-thumb {
  background: transparent;
}

/* This will style the entire scrollbar (the track) */
::-webkit-scrollbar {
  width: 0.8vh; /* Adjust the width of the scrollbar */
  background: transparent; /* Optional: Set the background color of the scrollbar track */
}

/* This will style the thumb or draggable scrolling element */
::-webkit-scrollbar-thumb {
  background: #ffffff; /* Color of the scroll thumb */
  border-radius: 0.5vh; /* Roundness of the scroll thumb */
}

/* This is for the thumb when it's being hovered over */
::-webkit-scrollbar-thumb:hover {
  background: #dedede; /* Color of the scroll thumb on hover */
}

a {
  color: white;
}

.hidden {
  display: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}


#user-input.fade-out {
  animation: fadeOut 0.5s forwards;
}

#user-input::placeholder {
  color: transparent;
}

@keyframes waveAnimation {
  0% {
    transform: translateX(-50%) scale(0.2);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0;
  }
}


#complitionContainer {
  position: absolute;
  top: 0;
  left: 16vw; /* Adjust if sidebar width changes */
  width: 84vw; /* Remaining width */
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 3vw 4vw;
}
#complitionHeader {
  flex: 0 1 auto;
  padding: 1vh;
  background-color: #f2f2f2;
  border-top: 0.1vh solid #ccc;
  display: flex;
  justify-content: space-between;
}
#complition-content {
  position: relative;
  flex: 1 1 auto; /* Allows this section to grow and fill available space */
  overflow-y: auto; /* Enables vertical scrolling */
  padding: 3vh 2vh;
  background: #a6a6a6;
}
/* Styles for the completion table and its elements */
#complition-content table {
  width: 100%;
  border-collapse: collapse; /* Ensures borders between cells are merged */
  background-color: #ffffff; /* White background for the table */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */
  text-align: left;
  font-size: 1rem;
}

#complition-content th, #complition-content td {
  border: 1px solid #dddddd; /* Light grey border for readability */
  padding: 8px; /* Adequate padding for content */
  text-align: left;
}

#complition-content th {
  background-color: #00B4D5;
  color: white; /* White text for contrast */
  font-weight: bold;
}

#complition-content tbody tr:nth-child(odd) {
  background-color: #f9f9f9; /* Zebra striping for rows */
}

#complition-content tbody tr:hover {
  background-color: #f1f1f1; /* Light grey background on row hover */
}


/* Container holding everything, adjusted for sidebar */
#onboardingContainer {
  position: absolute;
  top: 0;
  left: 16vw; /* Adjust if sidebar width changes */
  width: 84vw; /* Remaining width */
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 3vw 4vw;
}

#onboardingTop {
  display: flex; /* Make it a flex container */
  flex-direction: column; /* Arrange children in a column */
  justify-content: center; /* Center children vertically */
  flex: 0 1 auto;
  background-color: #f2f2f2;
  border-top: 0.1vh solid #ccc;
  border-radius: 0.5vh 0.5vh 0 0;
  padding-left: 4vh;
  padding-top: 1vh;
  padding-right: 1vh;
  padding-bottom: 0.5vh;
}
#onboardingTop h2 {
  margin-bottom: 1vh;
  font-size: 3.5vh;
}
#onboardingTop label {
  font-style: italic;
}
#navigationText {
  font-size: 2vh;
  text-decoration: underline;
  font-weight: 300;
}
#onboardingButtons {
  flex: 0 1 auto;
  margin-bottom: 1vh;
}
#onboardingTopHeader {
  display: flex;
  justify-content: space-between;
}
.help-button {
  background-color: transparent; /* Set a pleasant blue background */
  border: none;/* Remove the default border */
  margin-right: 1vh;
  border-radius: 50%; /* Rounded corners */
  color: black; /* White text color */
  width: 5vh; /* Width of the button */
  height: 5vh; /* Height of the button, equal to width to maintain circle */
  display: flex; /* Enables flexbox layout */
  justify-content: center; /* Center aligns items horizontally in flex container */
  align-items: center; /* Center aligns items vertically in flex container */
  font-size: 3vh; /* Text size */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}
.help-button i {
  font-size: 5vh; /* Icon size */
}
.help-button:hover {
  color: #262626;
}
/* Top Section: Onboarding Buttons */
.onboarding-button {
  flex: 0 1 auto;
  padding: 1vh;
  background-color: #f2f2f2;
  border-bottom: 0.1vh solid #000000;
  cursor: pointer;
  font-size: 1.5vh;
  transition: background-color 0.3s, transform 0.2s; /* Smooth transition for hover effects */
  border-radius: 0.5vh; /* Slightly rounded corners for a modern look */
  color: #333; /* Darker text color for better readability */
  text-align: center; /* Center the text inside the button */
}

.onboarding-button:hover {
  background-color: #e8e8e8; /* Lighter grey on hover */
  transform: translateY(-0.2vh); /* Slight lift effect on hover */
}

.onboarding-button.active {
  background-color: #cccccc; /* Darker grey for active state */
  border-bottom: 0.3vh solid #222222; /* Thicker and darker border in the active state */
  transform: translateY(-0.2vh); /* Slightly raised even in the active state */
}
.arrow {
  font-size: 2vh; /* Adjust the size of the arrow icon */
  margin: 0 1vh; /* Space around the arrow icon */
  color: #333; /* Arrow color */
}
.slash {
  font-size: 2vh; /* Adjust the size of the slash */
  margin: 0 0.2vh; /* Space around the slash */
  color: #333; /* Slash color */
}



/* Middle Section: Onboarding Content */
#onboarding-content {
  flex: 1 1 auto; /* Allows this section to grow and fill available space */
  overflow-y: auto; /* Enables vertical scrolling */
  padding: 3vh 2vh;
  background: #a6a6a6;
}
.chunk-header {
  width: 95%;
  display: flex;
  align-items: center;
  gap: 1vh;  /* Adds space between form elements */
  margin-bottom: 1vh; /* Space below each form */
}
.move-up, .move-down {
  font-size: 16px;
  padding: 5px 10px;
  margin: 2px;
  cursor: pointer;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.move-up:hover, .move-down:hover {
  background-color: #e0e0e0;
}

.chunk-part {
  width: 95%;
  display: flex;
  align-items: center;
  margin-top: 1vh; /* Space below each form */
}

#onboarding-content h2 {
  margin-left: 1.5vh;
  font-size: 2.5vh;
}
#onboarding-content img {
  max-width: 5vw;
  height: auto;
}
#onboarding-content label {
  font-size: 1.5vh;
  color: black;
  margin-left: 1.5vh;
  font-weight: bold;
  white-space: nowrap;
}
#onboarding-content input {
  display: block; /* Ensure each input appears on a new line */
  margin-left: 1vh;
  color: black;
  width: 95%; /* Make input fields take up most of the container width */
  padding: 1vh; /* Add padding inside the input fields for better readability */
  border: 0.1vh; solid #ddd; /* Light grey border for the inputs */
  border-radius: 0.4vh; /* Slightly rounded corners for the inputs */
  box-shadow: inset 0 0.2vh 0.4vh rgba(0,0,0,0.1); /* Subtle inset shadow for depth */
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.2vh;
}
#onboarding-content textarea {
  width: 95%;
  margin-left: 1.5vh;
  color: black;
  padding: 2vh;
  border: 0.1vh solid #ccc;
  border-radius: 0.4vh;
  box-sizing: border-box;
  resize: none; /* Disable manual resizing */
  box-shadow: inset 0 0.2vh 0.4vh rgba(0,0,0,0.1);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.3vh;
  line-height: 1;
  overflow: hidden; /* Hide overflow */
}

.chunk-container {
  padding: 1vh;
  margin-bottom: 1vh;
  border-radius: 0.5vh;
  box-shadow: 0 0.2vh 0.4vh rgba(0,0,0,0.1);
}

.chunk-container.even {
  background-color: #f9f9f9;
}

.chunk-container.odd {
  background-color: #e9e9e9;
}
.image-form {
  width: 95%;
  display: flex;
  align-items: center;
  gap: 1vh;  /* Adds space between form elements */
  margin-bottom: 1vh; /* Space below each form */
}

.input-file {
  flex-grow: 1; /* Allows the input to grow and fill available space */
}

.image-preview {
  width: 5vh; /* Fixed width for image previews */
  height: 5vh; /* Fixed height for image previews */
  object-fit: cover; /* Ensures the image covers the area without distortion */
  border: 0.1vh solid #ccc; /* Adds a subtle border around the image */
  border-radius: 0.5vh; /* Optional: rounds the corners of the image preview */
  cursor: pointer; /* Adds a pointer cursor on hover */
}

.image-status {
  color: #666; /* Sets a lighter text color for the status */
  font-size: 1vh; /* Slightly smaller font size */
  white-space: nowrap; /* Keeps the status text on one line */
}

/* Bottom Section: Modify Buttons */
#modifyButtons {
  flex: 0 1 auto;
  padding: 1vh;
  background-color: #f2f2f2;
  border-top: 0.1vh solid #ccc;
  padding-left: 4vh;
  gap: 1vh;
  border-radius: 0 0 0.5vh 0.5vh;
}

/* Style for buttons for consistency */
#modifyButtons button {
  padding: 1vh;
  cursor: pointer;
  font-size: 1.5vh;
}
#savedText {
  font-size: 1.5vh;
  margin-left: 1.5vh;
  font-style: italic;
}

#documentContainer {
  position: absolute;
  top: 0;
  left: 16vw; /* Adjust if sidebar width changes */
  width: 84vw; /* Remaining width */
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 3vw 4vw;
}
#documentTop {
  flex: 0 1 auto;
  padding: 1vh;
  background-color: #f2f2f2;
  border-top: 0.1vh solid #ccc;
  display: flex;
  justify-content: space-between;
}
#documentTop h2 {
  margin-right: 2vh;
  font-size: 3.5vh;
}
#documentMiddle {
  flex: 1 1 auto; /* Allows this section to grow and fill available space */
  overflow-y: auto; /* Enables vertical scrolling */
  padding: 3vh 2vh;
  background: #a6a6a6;
}


.document-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh;
  margin-bottom: 0.5vh;
  background-color: #f0f0f0;
  border-radius: 0.5vh;
}

.document-name, .document-tags {
  margin-right: 1.5vh; /* Ensures spacing between the elements */
}

.document-name {
  font-weight: bold;
  color: navy;
  font-size: 2vh;
  cursor: pointer;
}

.document-tags {
  font-size: 1.5vh;
  color: gray;
  font-style: italic;
}

.delete-button {
  padding: 0.5vh 1vh;
  background-color: red;
  color: white;
  border: none;
  border-radius: 0.5vh;
  cursor: pointer;
}

.delete-button:hover {
  background-color: darkred;
}


#documentBottom {
  display: flex;
  align-items: center; /* Vertically centers the elements */
  justify-content: space-evenly; /* Evenly space the elements */
  padding: 2vh;
  background-color: #f2f2f2;
  border-top: 0.1vh solid #ccc;
}

#documentBottom input[type="file"] {
  flex: 1; /* Takes up remaining space */
  padding: 1vh;
  border: 0.1vh solid #ccc;
  border-radius: 0.5vh;
  margin-right: 1vh;
}

#documentBottom input[type="checkbox"] {
  margin-right: 0.5vh; /* Space between checkbox and label */
}

#documentBottom label {
  margin-right: 2vh; /* Space after each label-checkbox group */
  font-size: 1.8vh;
  color: #333;
}

#documentBottom button {
  padding: 1vh 2vh;
  font-size: 2vh;
  background-color: #4CAF50; /* A nice green */
  color: white;
  border: none;
  border-radius: 0.5vh;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#documentBottom button:hover {
  background-color: #45a049; /* Darker shade of green on hover */
}