/* Style for the sign in header */
.header {
  margin-top: 20px; /* Adds a top margin of 20px to the header */
  display: flex; /* Uses flexbox layout for the header */
  gap: 30px; /* Sets a 30px gap between flex items */
  color: var(--global-grey); /* Sets the text color to the global grey variable */
}

.container {
  margin-left: 30%; /* Adds a left margin of 30% to center the container */
}

img {
  opacity: 0.65; /* Sets the opacity of images to 65% */
}

form {
  display: flex; /* Uses flexbox layout for the form */
  flex-direction: column; /* Arranges form elements in a column */
  max-width: 500px; /* Sets a maximum width of 500px for the form */
}

form div {
  display: flex; /* Uses flexbox layout for div elements within the form */
  justify-content: space-between; /* Distributes space between items evenly */
  margin: 5px 0; /* Adds vertical margins of 5px */
  align-items: center; /* Centers items along the cross axis */
}

form .submit {
  display: flex; /* Uses flexbox layout for the submit button container */
  justify-content: flex-end; /* Aligns the submit button to the right */
  margin-top: 30px; /* Adds a top margin of 30px */
}

u {
  color: var(--global-blue); /* Sets the color of underlined text to the global blue variable */
}

button {
  width: 350px;                              /* Take up the full width */
  height: 2em;                             /* Take up the full height */
  padding: 5px;                             /* Padding inside the element */
  cursor: pointer;                         /* Show a pointer cursor on hover */
  border-radius: 0;                        /* No border radius */
  border: 0;                               /* No border */
  color: var(--global-white);              /* Text color using the CSS variable */
  background-color: var(--global-button-blue);   /* Background color using the CSS variable */
  transition: background-color 0.4s ease-in-out; /* Smooth transition for background color change */
}

button:hover {
  cursor: pointer; /* Sets the cursor to pointer on hover */
  background-color: var(--global-button-blue-hover); /* Changes the background color on hover to the global button blue hover variable */
}

input {
  height: 2em; /* Sets the input height to 2em */
  width: 350px; /* Sets the input width to 350px */
}

hr {
  margin: 30px 20%; /* Adds vertical margins of 30px and horizontal margins of 20% */
}

.links {
  display: flex; /* Uses flexbox layout for the links container */
  flex-direction: column; /* Arranges links in a column */
  align-items: center; /* Centers items along the cross axis */
  gap: 10px; /* Sets a 10px gap between link items */
}

.error-div {
  border-radius: 5px; /* Optional: Rounds the corners of the error box */
  padding: 10px; /* Adds padding inside the error box */
  width: 80%; /* Sets the width of the error box */
  margin: 0 auto; /* Centers the error box horizontally */
}

.error-div p {
  color: var(--primary-red) !important; /* Sets text color using the primary red variable */
  font-size: 15px; /* Sets font size for the error message */
  margin-bottom: 20px; /* Adds a bottom margin of 20px */
  padding: 0; /* Removes padding */
  text-align: center; /* Centers the text */
  width: 100%; /* Sets the width to 100% */
  height: 1em; /* Sets the height to 1em */
  display: flex; /* Uses flexbox layout */
  align-items: center; /* Centers items vertically */
  justify-content: center; /* Centers items horizontally */
}