.error {
    color: #FF0000;
  }

  body {
    font-family: 'Franklin Gothic Book', 'Arial Narrow', Arial, sans-serif;
  }

  body, #instructions-content {
    background-color: rgb(11, 88, 189);
  }

  .container {
    display: flex;
    justify-content: center;
    /* Centers horizontally */
  }

  #site-contents {
    position: absolute;
    border-radius: 15px;
    border: 2px solid;
    padding: 50px 10px 10px 10px;
    background-color: white;
    margin-right: 20px;
  }

  #instructions {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
  }

  #instructions-content {
    color: white;
    max-width: 420px;
    z-index: 2; /* Sit on top */
    -webkit-animation: instructionsanimatezoom 0.6s;
    animation: instructionsanimatezoom 0.6s;
    padding: 20px;
    border-radius: 15px;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  }

  #instructions-content p {
    text-indent: 40px;
  }

  .buttonContainer {
    display: flex;
    justify-content: space-between;
  }

  #title {
    text-align: center;
  }

  #logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 275px;
  }

  .moveToNextStatusButton {
    background-color: forestgreen;
    color: lightcyan;
    padding: 10px 10px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
  }

  .moveToNextStatusButton:hover {
    background-color: darkgreen;
  }

  .moveToNextStatusButton:disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: default;
    opacity: 0.7; /* Optional: adds a visual hint of being disabled */
  }

  #customWorkQueueFileInput, #openLoginBtn, #logoutBtn, #instructionsBtn {
    background-color: #007bff;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
  }

  #customWorkQueueFileInput:disabled {
    background-color: #cccccc; /* Gray background */
    color: #666666; /* Darker gray text */
    cursor: not-allowed; /* Change cursor to indicate non-interactivity */
    opacity: 0.7; /* Optional: reduce opacity to further indicate disabled state */
  }

  #customWorkQueueFileInput:hover:enabled, #openLoginBtn:hover, #logoutBtn:hover, #instructionsBtn:hover {
    background-color: darkblue;
  }

  #workQueueFileInput {
    display: none;
  }

  #message-container {
    text-align: center;
  }

  .inputnumber {
    width: 40px;
  }

  #warehouseId {
    margin-bottom: 20px;
  }

  /* Target all cells in a row except the last one and apply a background color */
  .step1 td:not(:last-child) {
    background-color: orange;
    /* Your desired background color */
  }

  /* Target all cells in a row except the last one and apply a background color */
  .steplast td:not(:last-child) {
    background-color: #29ba41;
    /* Your desired background color */
  }

  .workQueue {
    border-collapse: collapse;
  }

  .workQueue th, .workQueue td {
    padding: 8px;
  }

  .workQueue td:not(:last-child) {
    border: 1px solid black;
  }

  thead th {
    position: sticky;
    top: 0;
    color: #ebebeb;
    background-color: #656464;
    /* Optional: Add a background color for better visibility */
    z-index: 1;
    /* Optional: Ensures the header stays on top of other content */
  }

  td:not(.status), th {
    word-wrap: break-word;
    max-width: 110px;
  }

  /* Because td color supercedes its parent tr color, we must omit other table rows that we're painting when applying general formatting to a td.
     Issue: Other styles were not being applied to rows with alternating formatting.
     Cause: When we added a specifier for td elements, we changed alternating row styles from tr formatting to td formatting.
            This overrode other td formatting applied by classes meant to color code these rows.
            It wasn't an issue before this because the tr formatting was "underneath" the td color coding applied by the classes.
     Resolution: We specifically omit these classes when applying alternating row styling.*/
  tr:nth-child(even):not(.step1, .steplast) td:not(:last-child) {
    background-color: #f2f2f2;
    /* Light gray for even rows */
  }

  #logoutBtn {
    display:none;
  }

  @-webkit-keyframes instructionsanimatezoom {
    from {-webkit-transform: scale(0, 0.5)} 
    to {-webkit-transform: scale(1, 1)}
  }
    
  @keyframes instructionsanimatezoom {
    from {transform: scale(0, 0.5)} 
    to {transform: scale(1, 1)}
  }
  
  /******FOR LOGIN FORM******/
  /* Full-width input fields */
  #id01 input[type=text], #id01 input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }

  /* Set a style for all buttons */
  #id01 button {
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 1;
    transition: 0.3s;
  }

  #id01 button:hover {
    opacity: 0.8;
  }

  /* Extra styles for the cancel button */
  #id01 .cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
  }

  /* Center the image and position the close button */
  #id01 .imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
  }

  #id01 img.avatar {
    width: 256px;
    border-radius: 50%;
  }

  #id01 .loginContainer {
    padding: 16px;
    background-color:#f1f1f1;
  }

  #id01 span.psw {
    float: right;
    padding-top: 16px;
  }

  /* The Modal (background) */
  #id01 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
  }

  /* Modal Content/Box */
  #id01 .modal-content {
    max-width: 500px;
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
  }

  /* The Close Button (x) */
  #id01 .close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
  }

  #id01 .close:hover,
  #id01 .close:focus {
    color: red;
    cursor: pointer;
  }

  /* Add Zoom Animation */
  #id01 .animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
  }

  @-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0, 0.5)} 
    to {-webkit-transform: scale(1, 1)}
  }
    
  @keyframes animatezoom {
    from {transform: scale(0, 0.5)} 
    to {transform: scale(1, 1)}
  }

  /* Change styles for span and cancel button on extra small screens */
  @media screen and (max-width: 300px) {
    #id01 span.psw {
      display: block;
      float: none;
    }
    #id01 .cancelbtn {
      width: 100%;
    }
  }