main {
  position: relative; /* Establishes a positioning context for absolute positioned children */
  padding-bottom: 50px; /* Space for the footer */
}

footer {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px; /* Height of the footer */
}

label {
  font-family: sans-serif;
  font-size: 12px;
  color: #333;
  font-weight: normal;
  margin-bottom: 8px;
  display: inline;
}

.arrow-container {
  display: inline-block;
  width: 50%; /* Each takes up half the width */
  height: 20px; /* Adjust height to fit the image or desired container size */
  text-align: center; /* Center content horizontally */
  vertical-align: top; /* Aligns elements to the top if they have different heights */
  background-image: url('../images/down-arrow.png'); /* Set background image */
  background-size: contain; /* Scale image to fit the container without distortion */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-position: center center; /* Center the image horizontally and vertically */
 /* font-size: 16px;  Reset font-size if it was zeroed out */
}

/* Outer containers: take 100% width each, add 45% to the containers that appear 2 on the same row */
.row-container {
  display: inline-block;
  width: 100%;
  vertical-align: top;
 /*  text-align: left; Adjust to align labels inside each container as required */
  font-size: 16px; /* Reset font size */
  box-sizing: border-box; /* Ensures padding doesn't affect width */
  padding: 5px; /* Optional padding */
  margin-top:-25px;
  /*text-align: center;  Center all text inside */
}

.row-container a {
  margin-left: 20px;
  font-size: 10pt;
  text-decoration: none;
  color: #007bff;
  cursor: pointer;
  display: inline;
}

.row-box { 
  width: 100%; /* Ensures the textarea fills the width of its .input-container */
 /* height: 100px;  Adjusts the height to fill the .input-container 
  border-width: 2px ;
  border-radius: 10px;*/
  padding: 10px; /* Adds padding inside the textarea for text */
  box-sizing: border-box; /* Includes padding and border in the element's total dimensions */
  resize: none; /* Prevents resizing of the textarea */
  overflow: auto; /* Adds scrollbars if text exceeds the textarea's dimensions */
  font-size: 12px;
  font-family: sans-serif;
  box-shadow: none;
}

.arrow-wrapper img {
  width: 5%; /* Adjust the sizing of the image */
  height: 15px;
}


input {
    min-width: 5px; /* Sets a minimum width for input fields */
    width: 100%; /* Allows input field to expand to the full width of the cell */
    box-sizing: border-box; /* Includes padding and border in the width */
}



.spacer-row {
  font-size: 0; /* Removes space between inline-block elements caused by whitespace in the HTML */
  float:left;
  align-items: center; /* Centers the arrow containers horizontally */
  height:30px;
  width: 100%; /* Ensures spacer column takes full height */
}


/* Middle div: Takes 5% width */
.red-xs {
  display: inline-block;
  color: red; /* Sets the color */
  font-family:Arial;
  font-weight:800;
  width: 5%;
  vertical-align: top;
  text-align: center;
  font-size: 24px; /* Reset font size */
  box-sizing: border-box;
  margin-top:0px;
}

    
  /* this section handles keeping the display at 50/50 between assistant and diagram
  and then removing the styling for printing */
  .container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Full viewport height */
}

.top-section {
    flex: 1; /* Takes up only as much space as it needs */
    overflow-y: auto; /* Allows scrolling within the top section if content overflows */
}

.bottom-section {
    flex: 0 0 50vh; /* Always takes up 50% of the viewport height */
    overflow-y: auto; /* Optional, allows scrolling within the bottom section if content overflows */
}
@media print {
    .container {
        display: block; /* Ensure both sections are displayed */
    }

    .top-section {
        height: auto; /* Take up content height for printing */
        flex: none; /* Remove the flexible behavior */
        overflow: visible; /* Make all content visible */
    }

    .bottom-section {
        height: auto; /* Take up content height for printing */
        flex: none; /* Remove the flexible behavior */
        overflow: visible; /* Make all content visible */
    }
}


/* styling for login form */

body {
  margin: 0;
  font-family: Arial, sans-serif;
  height: 100vh;
  background-color: #f7f7f7; /* Light background color */
  position: relative; /* Needed for absolute positioning of the form */
}

#loginForm {
  background-color: #ffefd5; /* Pastel peach color */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the form */
}

#loginForm input {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  width: calc(100% - 22px); /* Adjust width to fit inside the form */
}

#loginForm input:focus {
  border-color: #87cefa; /* Light pastel blue color */
  outline: none;
}

#loginButton {
  padding: 10px;
  background-color: #87cefa; /* Light pastel blue color */
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
}

#loginButton:hover {
  background-color: #6ca0dc; /* Slightly darker blue on hover */
}

/* Media query to stack divs when width is below 400px */
@media (max-width: 200px) {
  .row-container {
    width: 100%;
  }

  .red-xs {
    width: 100%;
  }
}


.wide-button {
width: 20vw;
height: 40px;
margin: 10px;
/*margin-top: -380px; */
padding: 15px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50; /* Green background */
color: white; /* White text */
border: none;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}

.wide-button:hover {
background-color: #45a049; /* Darker green on hover */
}
.buttonContainer {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
}

 @media print {
      .wide-button {
        display: none;
      }
    }

    
    .sessionPin {
      height: 40px; /* Adjust the height to match your button height */
      width: 100px; /* Adjust the width to fit 12 characters */
      font-size: 16px;
      text-align: center;
      margin-left: 10px; /* Adjust margin as needed */
      display: inline-block; /* Ensure inline display */
    }