/* STYLES USED FOR OXIDATION NUMBER AND NEXT STEP TEMPLATE TO ENSURE BUTTONS AND EQUATIONS ARE NICELY DEPICTED */

/* Styles for the user answer textarea */
#user_answer {
    width: 100%;
    min-height: 50px;
    border: 1px solid #ccc;
    padding: 5px;
    margin-bottom: 10px;
}

/* Specific style for next-step input */
.user_answer_large {
    width: 600px;
    height: 60px;
}

/* Container margin for button group */
.buttons {
    margin-bottom: 10px;
}

/* Common styles for all buttons */
.buttons button {
    padding: 12px;
    margin-right: 10px;
    background-color: #28a745; /* Light green */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: pre-line;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: none;
}

/* Specific styles for the larger buttons (next_step) */
.buttons-large {
    font-size: 14px;
    width: 120px;
    height: 60px;
}

/* Specific styles for the smaller buttons (oxidation_number) */
.buttons-small {
    font-size: 16px;
    width: 80px;
    height: 40px;
    font-family: 'Times New Roman', Times, serif; /* Use a serif font */
}

/* Darker green color on hovering */
.buttons button:hover {
    background-color: #218838;
}

/* Even darker green color when pressed */
.buttons button:active {
    background-color: #1e7e34;
}

/* Styling for active button */
button.active {
    background-color: #d1d1d1;
    border: inset 2px #888888;
}

/* Make sure buttons on homepage are all of the same size */
.uniform-button {
    width: 250px;
}

/* Make sure explanation button + corresponding text are aligned correctly on screen */
#explanation-section {
    display: none; /* Initially hidden */
    position: fixed;
    right: 20px;
    top: 40%;
    background-color: #f8f9fa; /* Light gray background */
    border: 1px solid #ccc; /* Gray border */
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: fit-content;
    text-align: center;
}

/* Styling for the explanatory text section */
#explanation-section p {
    margin: 5px 0 2px;
    font-size: 14px;
}

/* Styling for the actual button */
#explanation-section button {
    width: 100%;
}

/* Styling input container for proper alignment */
.input-container {
    position: relative;
    display: inline-block;
    text-align: center;
    width: 100%;
}

/* Style for the oxidation state input fields */
.oxidation-input {
    position: relative;
    margin: 0 0.1em; /* Base margin between input fields in em units */
    width: 2em;
    height: 2em;  /* Make both 40px for square dimensions */
    text-align: center;
    display: inline-block;
    border: 1px solid black; /* Ensure there's a visible border */
    box-sizing: border-box;  /* Include padding and border in total width/height */
}

/* Styles for the rendered equation */
#equationLaTeX, #equationLaTeX1, #equationLaTeX2 {
    font-size: 1.8em;
    font-weight: bold;
    margin-top: 5px;
}

/* Adjusting margin between button panel and input fields */
#buttonPanel {
    margin-bottom: 10px;
}

/* Reset margin and padding for input fields container */
#oxidationInputs, #oxidationInputs2 {
    margin: 0;
    padding: 0;
    font-family: 'Times New Roman', Times, serif;
}

.btn {
    margin-top: 20px; /* Controlled gap before the submit button */
}

/* Additional styling for form layout */
#oxidationForm {
    margin-bottom: 30px; /* Ensures spacing away from other content on the page, if any */
}

/* Specific styles for the tutorial modal */
#tutorialModal .modal-dialog {
    max-width: 800px; /* Keep it responsive */
    margin: 30px auto; /* Center vertically */
}

#tutorialModal .modal-content {
    background-color: #f9f9f9; /* Softer background color */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#tutorialModal .modal-header {
    border-bottom: 1px solid #e5e5e5; /* Subtle division */
}

#tutorialModal .modal-title {
    font-weight: bold;
    color: #333;
}

#tutorialModal .modal-body {
    max-height: 60vh; /* Prevent overflow */
    overflow-y: auto; /* Allow scrolling */
    padding: 20px; /* Adequate spacing */
}

#tutorialModal .modal-body img {
    max-width: 80%; /* Ensure the pictures do not span beyond side borders */
    height: auto;
    display: block; /* Center images */
    margin: 10px auto; /* Add some vertical spacing */
}

#tutorialModal .modal-footer {
    border-top: 1px solid #e5e5e5; /* Subtle division */
    padding: 15px;
    text-align: right; /* Align button to the right */
}

#tutorialModal .btn-primary {
    background-color: #007bff; /* Bootstrap's primary blue */
    border-color: #007bff;
}

#tutorialModal .btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* Styles for full-screen customAlert modal for error messages */
#customAlert .modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  justify-content: center;
  align-items: center;
}

/* Styles for modal content box */
#customAlert .modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* Center horizontally and include top margin */
  padding: 20px; /* For content spacing */
  border: 1px solid #888;
  width: 300px; /* Fixed width */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  text-align: center;
}

/* Alert message stylings */
#alertMessage {
  font-size: 18px; /* Larger text */
}

/* Styles for the 'Ok' button */
#closeBtn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
  margin-top: 15px;
}

/* Hovering over the close-button */
#closeBtn:hover {
  background-color: #45a049; /* Slightly darker green on hover */
}

.responsive-img {
    max-width: 45%;
    height: auto;
    display: block;
}

.image-container {
    max-width: 80%;          /* Limits the container width to 80% of its parent */
    margin: 0 auto;          /* Centers the container horizontally */
    display: flex;           /* Enables flexbox */
    justify-content: center; /* Centers content horizontally */
}

.responsive-img2 {
    width: 100%; /* Make the image fill the container width */
    height: auto; /* Maintain aspect ratio */
}