/* Reset some default styles */
body, h1, p {
  margin: 0;
  padding: 0;
}

/* Prevent autocomplete styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #98F3EE inset !important; /* Set the background color to the desired color */
}

/* Apply styles to the login container */
.emp-login-done {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* Vertically center the content */
}

/* Apply styles to the logo */
.logo {
  margin-bottom: 20px; /* Add margin to separate the logo from the login frame */
}

/* Apply styles to the "Employee Sign In" heading */
.employee-sign-in {
  font-family: "Inter", Helvetica, sans-serif;
  font-weight: 40;
  color: #000000;
  font-size: 30px;
  margin: -26px auto; /* Center the text horizontally and add margin */
  text-align: center;
  background-image: url('profile.png'); /* Replace 'your-image.jpg' with your image path */
  background-size: 1% auto; /* Set the background image width to 50% and maintain its aspect ratio */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-position: center; /* Center the image horizontally and vertically */
  height: 100px; /* Set the height of the heading */
  width: 300px; /* Set the width of the heading */
}

/* Apply styles to the login frame */
.login-frame {
  background-color: #EAECFD;
  width: 486px; /* Adjust the width as needed */
  text-align: center;
  border-radius:50px; /* Adjust the border radius */
  padding: 20px; /* Add padding to create separation */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center-align the content horizontally */
}

/* Apply styles to the input frame (containing username and password fields) */
.input-frame {
  background-color: #EAECFD;
  text-align: center; /* Center-align the input fields */
  margin-bottom: 20px;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center-align the content horizontally */
}

/* Apply styles to the input fields within the input frame */
.input-frame input[type="text"],
.input-frame input[type="password"] {
  width: 297px;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 20px;
  background-color: #98F3EE; /* Set the background color to the desired color */
  text-align: center; /* Center-align the text within the input fields */
  align-self: stretch; /* Make the input fields stretch to the width of the container */
}

/* Apply styles to the login button */
input[type="submit"] {
  background-color: #699BF7;
  color: #222222;
  border: none;
  border-radius: 30px;
  padding: 20px 30px;
  font-size: 22px;
  cursor: pointer;
  margin-top: 20px; /* Add some margin to separate the button */
  margin-bottom: 20px;/* Add some margin to separate the button */
  text-align: center;
  white-space: nowrap;
  top: 32px; 
  left: 0;
  height: 64px;
}

/* Add a hover effect for the login button */
input[type="submit"]:hover {
  background-color: #558fe6;
}

/* Style the "Forgot Password?" link */
.forgot-password a {
  font-family: "Inter", Helvetica, sans-serif;
  text-decoration: none;
  color: #222222;
  font-size: 20px;
  margin-top: 22px;
  display: block;
  
}

/* Add a hover effect for the "Forgot Password?" link */
.forgot-password a:hover {
  color: #666666;
  font-family: "Inter", Helvetica, sans-serif;
}