:root {
  --header-height: 70px; /* Set your default header height here */
  --select-position: 100px; /* Set your default header height here */
}
.body {
    font-family: Arial
}
/* CSS for the header div */
#header {
   position: fixed;
    top: 0;
    left: 10px;
    right: 100px;
    width: 100%;
    height: var(--header-height);
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 8888;
    max-width: calc(100% - 110px);
    font-family: Roboto,sans-serif;
    font-weight: 700;
    line-height: 1.23;
    padding-bottom: 7px;
    color: #424242;
}

/* CSS to include the base64 logo on the left side of the header */
#header .logo {
    width: 190px;
    height: 70px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url("../images/logoLiliaBySchool.jpg");

}
.headerTitle {
    width: calc(100% - 420px);
    /* height: 86px; */
    position: absolute;
    left: 248px;
    top: -12px;
    text-align: center;
}

.contentDescription {
  margin: 0;
  padding: 10px;
  text-indent: 20px;
}

#languageSelectContainer {
  position: absolute;
  top: 10px; /* Adjust the top value as needed to position the container vertically */
  right: 10px; /* Adjust the right value as needed to position the container horizontally */

}

.formDescription {
   margin: 0;
   padding: 10px;
   text-indent: 20px;
}

/* Style for the language select and label */
#languageSelect, #languageLabel {
  display: block; /* To ensure the label and select appear on separate lines */
  width: 100%;
}
#header .content {
   width: 100%;
}

/* CSS for the main content div */
#main-content {
    padding-top: var(--header-height);
    position: relative;
    top: 10px;
    left: 3px;
    right: 100px;
    width: 100%;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    max-width: calc(100% - 96px);
    background-color: white;
    font-family: 'Open Sans',sans-serif,sans,arial;
    color: #424242;

}
/* Standard button styles */
button {
  width: 150px;
  padding: 8px;
  color: white;
  background-color: #f3c317; /* Background color */
  border: 1px solid #424242;
  border-radius: 20px; /* Slightly rounded edges */
  cursor: pointer;
  margin-left: 10px; /* Add some spacing between the buttons */
  font-family: 'Open Sans',sans-serif,sans,arial;
}

/* Button hover styles */
button:hover {
  background-color: #010101; /* Button background color on hover */
  color: white; /* Text color on hover */
  border-color: white; /* Border color on hover */
}

.infoButton {
    max-width: 40px;
    max-height: 40px;
    position: relative;
    top: 4px;
}

/* Modal styles */
.modal {

  background-color: rgba(128, 128, 128, 0.8); /* Light grey background with some transparency */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  font-family: 'Open Sans',sans-serif,sans,arial;
  color: #424242;
}

/* Adjusted modal content styles */
.modal-content {
  background-color: #f3c317; /* Adjusted background color to match the website's color pattern */
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #424242; /* Use a darker border color for contrast */
  border-radius: 20px; /* Slightly rounded edges for a polished look */
  max-width: 500px;
  color: white;
}

/* Adjusted progress bar styles */
.progress-bar {
  background-color: #f2f2f2;
  border-radius: 10px; /* Rounded edges for the progress bar */
  height: 20px;
  margin-top: 10px;
  overflow: hidden;
}

/* Adjusted progress styles */
.progress {
  background-color: #424242;
  height: 100%;
  width: 0;
}

/* Additional prompt details */
#additionalPrompt {
  max-width: calc(100%); /* Set the max-width of the container to screen width minus 150px */
  margin: 0 auto; /* Center the container horizontally */

  box-sizing: border-box;
  display: flex; /* Use flexbox for layout */
  flex-wrap: wrap; /* Allow elements to wrap on small screens */
  align-items: center; /* Vertically center the elements */
}

#additionalPrompt h2 {
  width: 100%;
}

.input-container {
  flex: 1; /* Take available space in the flex container */
  max-width: calc(100%); /* Set the max-width of the input container to screen width minus 150px */
  padding-right: 10px; /* Add some space between the input and the button */
  box-sizing: border-box;
  display: flex; /* Use flexbox for layout */
  font-family: 'Open Sans',sans-serif,sans,arial;
}

#userPrompt {
  flex: 1; /* Take available space in the input container */
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Apply the same styles to textboxes and selects */
.input-container input[type="text"],
.select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
       background-color: #f3c317;
       color: #424242;
}

.button-container {
  margin: 5px auto; /* Center the container horizontally */
  display: flex; /* Use flexbox for layout */
  justify-content: flex-end; /* Align buttons to the right */
}

/* Optional: Add some spacing between the rows */
.button-container + * {
  margin-top: 10px;
}
table {
  width: calc(100%); /* Set the table width to screen width minus 150px */
  margin: 0 auto; /* Center the table horizontally */
  color: #424242;
  /* background-color: #f7e7c6; */ /* Background color */
  border: 1px solid #424242;
}

/* Left cell styles */
td.left-cell {
  white-space: nowrap; /* Prevent text wrapping in the left cell */

}
td.right-cell {
width: 100%;
}

/* Special text box inside the right cell */
td.right-cell .special-textbox {
  width: 100%; /* Use all the available width inside the right cell */
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
/* Special div class */
.special-div {
  color: #424242;
  /* background-color: #f7e7c6; */ /* Background color */
  border: 1px solid #424242;
  border-radius: 10px;
  padding: 10px;
}

/* Styling for <hr> inside the special div */
.special-div hr {
  border-color: #f7e7c6;
  border: 4px solid #f3c317;
}

 .custom-tooltip {
    position: absolute;
    width: 350px;
    background-color: #f7e7c6;
    border-radius: 6px;
    padding: 5px;
    display: none;
    border-color: #f7e7c6;
    border: 4px solid #f2f2f2;
    font-family: 'Open Sans',sans-serif,sans,arial;
  }
  .close-button {
    position: absolute;
    top: -8px;
    right: 0px;
    cursor: pointer;
    font-size: 25px;
    color: #aaa;
  }

  .close-button:hover {
    color: #000;
  }
    .answer-container {
      border: 1px solid #ccc;
      padding: 5px;
      position: relative; /* Add this to make the button position relative to the div */
    }
    .editable-textarea {
      width: 99%; /* Make the textarea expand to fill the available width */
      resize: none; /* Disable textarea resizing */
      border: none; /* Remove the default textarea border */
      overflow-y: hidden; /* Hide vertical scrollbar */
      border-radius: 5px; /* Add rounded corners to the textarea */
      padding: 5px; /* Add some padding for better appearance */
      font-family: inherit; /* Use the same font as the surrounding elements */
      font-size: inherit; /* Use the same font size as the surrounding elements */
      color: #424242;
    }

    /* Optional: Add a box-shadow when the textarea is focused */
    .editable-textarea:focus {
      outline: none;
      box-shadow: 0 0 3px #007bff; /* You can change the color and size of the box-shadow */
    }

    .copy-button {
      position: absolute;
      width: 150px;
      padding: 7px;
      right: 0px;
      bottom: 0px;
    }
    .regenerate-button {
        right: 150px;
        width: 150px;
        padding: 7px;
        bottom: 0px;
        position: absolute;
    }
/* SMALL screens*/

@media screen and (max-width: 883px) {
:root {
  --header-height: 90px; /* Set your default header height here */
  --select-position: 100px; /* Set your default header height here */
}
  #header {
       top: 0;
       left: 0;
       position: fixed;
       width: 100%;
       background-color: white; /* Set the background color of the header */
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Add a box shadow for a subtle effect */
       z-index: 8888; /* Set a high z-index to ensure the header appears on top of other elements */
       max-width: calc(99%); /* This ensures at least 100px spacing on each side */
   }
   .headerTitle {
       width: calc(100% );
       position: relative;
       left: 0px;
       font-size: medium;
       top: 0px;
   }
   /* CSS to include the base64 logo on the left side of the header */
   #header .logo {
       width: 120px;
       /* Adjust the logo size for mobile devices */
       height: 46px;
       background-size: contain;
       /* Adjust background size to fit the logo */
       background-repeat: no-repeat;
       background-position: center center;
   }
   .contentDescription {
     margin: 0;
     position: relative;
     top: -17px;
   }

   /* CSS for the main content div */
   #main-content {
      background-color: white;
      left:0px;
      max-width: 100%;
      top: 30px;
    }
    #languageSelectContainer {
      top: 0px; /* Adjust the top value as needed to position the container vertically */
      right: 10px; /* Adjust the right value as needed to position the container horizontally */
      background-colour:#f3c317
    }


   /* Standard button styles */
   button {
       width: 250px;
       /* Make the buttons half the width of the parent container */
       padding: 15px;
       /* color: #424242; */
       /* background-color: #f7e7c6; */
       border: 1px solid #424242;
       border-radius: 20px;
       cursor: pointer;
       margin: 0 auto;
       /* Center the buttons horizontally */
       align-content: center;
       display: block;
       /* Display the buttons as block elements */
   }
 .editable-textarea {
    width: 97%,
 }
   /* Adjusted modal content styles */
   .modal-content {
       /* background-color: #f3c317; */
       /* margin: 10% auto; */
       /* Adjust the margin for better centering on mobile */
       padding: 10px;
       border: 1px solid #424242;
       border-radius: 20px;
       max-width: 85%;
       /* Adjust the maximum width for mobile devices */
       /* align-content: center; */
   }

   /* Adjusted progress bar styles */
   .progress-bar {
       background-color: #f2f2f2;
       border-radius: 10px;
       height: 40px;
       /* Adjust the height of the progress bar for mobile devices */
       margin-top: 10px;
       overflow: hidden;
   }

   /* Additional prompt details */
   #additionalPrompt {
       width: 100%;
       max-width: 100%;
       /* Set the max-width to 100% for mobile devices */
       margin: 0 auto;
       box-sizing: border-box;
       display: block;
       /* Use block display for mobile devices */
   }

   #additionalPrompt h2 {
       width: 100%;
   }

   .input-container {
       width: 100%;
       box-sizing: border-box;
       display: block;
       /* Use block display for mobile devices */
       margin-bottom: 10px;
       /* Add some spacing between elements */
   }

   .label {
       font-weight: bold;
       /* Make the labels bold for better visibility */
       display: block;
       /* Display labels as block elements to put them above textboxes */
       margin-bottom: 5px;
       /* Add some spacing between labels and textboxes */
   }

   #userPrompt {
       width: 100%;
       box-sizing: border-box;
       padding: 10px;
       border: 1px solid #ccc;
       border-radius: 5px;
   }


   /* Apply the same styles to textboxes and selects */
   .input-container input[type="text"], .select {
       width: 99%;
       box-sizing: border-box;
       border: 1px solid #ccc;
       border-radius: 5px;
       left: 2px;

   }

   .button-container {
     margin: 20px auto;
     /* Adjust the margin for better centering on mobile */
     display: flex;
     flex-direction: column; /* Stack buttons vertically on mobile devices */
     align-items: center; /* Center-align buttons horizontally */
     justify-content: center; /* Center-align buttons vertically */
   }

   /* Optional: Add some spacing between the rows */
   .button-container + * {
     margin-top: 10px;
   }

   /* Base styles for the table */
   table {
     width: 100%;
     border: 1px solid #424242;
   }

   /* Common styles for both left and right cells */
   td.left-cell,
   td.right-cell {
     text-align: center;
     display: block; /* Use block layout for better mobile responsiveness */
   }

   /* Styles for the left cell */
   td.left-cell {
     text-align: left; /* Align the label to the left for better alignment with input on mobile */
     padding-right: 10px; /* Add spacing between label and input on mobile */
     margin-bottom: 10px; /* Add spacing between cells on mobile */
          white-space: unset;
   }

   /* Styles for the right cell */
   td.right-cell {
     text-align: center; /* Center-align the input on mobile */
   }

   /* Container for input elements in the right cell */
   td.right-cell .input-container {
     display: block;
     margin-top: 10px; /* Add spacing between labels and input containers */
   }

   /* Special textbox styles */
   td.right-cell .special-textbox {
     width: 100%;
     box-sizing: border-box;
     padding: 10px;

     border: 1px solid #ccc;
     border-radius: 5px;

     /* Allow text to wrap within the textbox */
     white-space: unset;
   }

   /* Limit the maximum width of labels */
   td.left-cell .label {
     max-width: calc(100% - 20px); /* Adjust as needed, considering padding and spacing */
     display: inline-block;
   }

   /* Special div class */
   .special-div {
       /* color: #424242; */
       /* background-color: #f7e7c6; */
       border: 1px solid #424242;
       border-radius: 10px;
       padding: 15px;
   }

   /* Styling for <hr> inside the special div */
   .special-div hr {
       /* border-color: #f7e7c6; */
       /* border: 4px solid #f3c317; */
   }

   .custom-tooltip {
       position: fixed;
       width: 48%;
       /* Adjust the tooltip width for mobile devices */
       background-color: #f7e7c6;
       border-radius: 6px;
       padding: 5px,5px,5px,5px;
       display: none;
       border-color: #f7e7c6;
       border: 4px solid #f2f2f2;

       left: 10px;
   }

   .close-button {
       position: absolute;
       top: -8px;
       right: 0px;
       cursor: pointer;
       color: #aaa;
   }

   .close-button:hover {
       color: #000;
   }

   .answer-container {
       border: 1px solid #ccc;
       padding: 5px;
       position: relative;
   }


   .copy-button {
       position: absolute;
       width: 150px;
       padding: 7px;
   }



}