.sign-in-form {
    padding: 1rem 1.5em;
    border-radius: .5rem;
    background-color: #3d454f;
    max-width: 40rem;
    width: 100%;
    /*width: 50%; /* This will make the form take up 50% of its container width */
    min-width: 600px; /* This prevents the form from becoming too narrow on smaller screens */
    margin: auto;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

@media screen and (max-width: 640px) { /* Adjust breakpoint as needed */
  .sign-in-form {
    width: 100%; /* Full width on smaller screens */
    padding: 1rem;
  }
}

@media only screen and (max-width: 640px) {
  .top-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .top-bar .menu-icon,
  .top-bar-title {
    order: 1;
  }

  .topbar-responsive-links {
    order: 2;
    width: 100%;
    display: none;
  }

  .top-bar.expanded .topbar-responsive-links {
    display: block;
  }

  .top-bar .menu.vertical {
    text-align: left;
  }
}

.top-bar {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0; /* Adjust as needed */
  z-index: 1000; /* Ensure it's above other content */
}


  .sign-in-form h4 {
    color: white;
    margin-bottom: 1rem;
    font-weight: 600;
    text-transform: uppercase;
  }
  
  .sign-in-form label {
    text-transform: uppercase;
    color: #adadad;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 1rem;
  }
  
  .sign-in-form input {
    color: black;
  }
  
  .sign-in-form input:focus {
    opacity: .8;
  }
  
  .sign-in-form-username,
  .sign-in-form-password {
    border-radius: 30px;
    border: none;
    opacity: .1;
    transition: all ease .4s;
  }
  
  .sign-in-form-button {
    border-radius: 30px;
    border: 1px solid #fff;
    color: #fff;
    background-color: transparent;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
    padding: 1rem;
    transition: all ease .4s;
  }
  
  .sign-in-form-button:hover {
    background-color: #44c8ed;
    border-color: #44c8ed;
  }
  
  .full-height {
    min-height: 100vh; /* This makes the container take at least the full height of the viewport */
    display: flex;
    justify-content: center; /* This centers the content horizontally */
    align-items: center; /* This centers the content vertically */
}


/* Overview Orders Table */

#tblOrdersOverview td {
  vertical-align: top;
}